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