Object.defineProperty 劫持數據
- 只是對對象的屬性進行劫持
- 無法監聽新增屬性和刪除屬性
- 需要使用 vue.set, vue.delete
- 深層對象的劫持需要一次性遞歸
- 劫持數組時需要重寫覆蓋部分 Array.prototype 原生方法
Proxy 劫持數據
- 真正的對對象本身進行劫持
- 可以監聽到對象新增刪除屬性
- 只在 getter 時才對對象的下一層進行劫持(優化了性能)
- 能正確監聽原生數組方法
- 無法 polyfill 存在瀏覽器兼容問題
總結
Object.defineProperty 是對對象屬性的劫持
Proxy 是對整個對象劫持
Object.defineProperty 無法監聽新增和刪除
Object.defineProperty 無法監聽數組部分方法需要重寫
Object.defineProperty 性能不好要對深層對象劫持要一次性遞歸
Proxy 能正確監聽數組方法
Proxy 能正確監聽對象新增刪除屬性
Proxy 只在 getter 時才進行對象下一層屬性的劫持 性能優化
Proxy 兼容性不好
Object.defineProperty 和 Proxy
在 getter 時進行添加依賴 dep.addSub(watcher) 比如 綁定 view 層，在函數中使用
在 setter 時觸發依賴通知 dep.notify() 比如 修改屬性