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() 比如 修改属性