首先郁轻,我們先了解什么是defineProperty
defineProperty其實是定義對象的屬性
defineProperty其實不是核心的為一個對象做數(shù)據(jù)雙向綁定叉存,而是去給對象做屬性標簽革答,只不過屬性里的get和set實現(xiàn)了響應(yīng)式褥赊。
圖1
var a={"b":234}---------->console.log(object.getOwnPropertyDesciptor(a,"b") --> 就會出現(xiàn)圖上所示的屬性名參數(shù)尾菇。
? ?var _value=a.b;
//defineProperty有點缺陷在于需要在外定義個值返回
Object.defineProperty(a,"b",{
? ? get:function(){
? ? ? ? console.log('you get b');
? ? ????return _value;
????},
? ? set:function(newval){
? ? ????????console.log('this newvalue is'+newval);
? ? ????????_value=newval;
?????}
}
Object.freeze(a,"b")//冰凍
正題:Vue中從改變一個數(shù)據(jù)到發(fā)生改變的一個過程
改變過程.jpg
vue2的簡單改變過程
Vue3的數(shù)據(jù)層改變:
? ? Vue2中基本上使用defineProperty而vue3中是用proxy
????Proxy對象用于定義基本操作的的自定義行為(和defineProperty類似),功能幾乎一樣遏乔,只不過用法可能有些不同式曲。??
Vue3改變數(shù)據(jù)的操作
Proxy比defineProperty的好處:
? ? defineProperty只能監(jiān)聽某個屬性妨托,不能全對象監(jiān)聽
? ? 可以省去for循環(huán)提高效率
? ? 可以監(jiān)聽數(shù)組,不用再對單獨的數(shù)組做特異性操作
Proxy:
? ? 校驗類型
? ? 真正的私有變量
校驗源碼
檢測結(jié)果