Object.defineProperty,定義響應式的偽代碼:
function defineProperty(target,key,value){
const dep = new Dep()
Object.defineProperty(target,key,{
get(){
if (Dep.target){
//依賴收集
dep.depend()
}
return value
},
set(newVal){
value=newVal
...
//通知更新
//dep.notify()
}
})
}
缺點:
- 無法檢測到對象屬性的新增或刪除
由于js的動態(tài)性梯找,可以為對象追加新的屬性或者刪除其中某個屬性卸奉,這點對經過Object.defineProperty方法建立的響應式對象來說,只能追蹤對象已有數(shù)據(jù)是否被修改老客,無法追蹤新增屬性和刪除屬性,這就需要額外的代碼處理。 - 數(shù)組變化監(jiān)聽
vue2.x是通過代理數(shù)組原型恳邀,包裝了一層數(shù)組的變異方法:'pop','shift','unshift','sort','reverse','splice', 'push' - get set 攔截器不能直接操作target對象
Proxy對象
var proxy = new Proxy(obj, handler)
obj是要代理的對象,handler是定制攔截操作灶轰,返回一個代理對象
特點:
Proxy代理是針對整個對象谣沸,不是針對對象屬性做攔截
劣勢:
- 性能比promise還差
- 兼容性不太樂觀 ,無法完全polyfill
當然,Proxy也不是沒有坑笋颤,尤其要注意代理對象方法的this指向問題乳附;