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

 

 

Proxy的优势如下:

Proxy可以直接监听对象而非属性
Proxy可以直接监听数组的变化
Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等是Object.defineProperty不具备的
Proxy返回的是一个新对象,我们可以只操作新的对象达到目的,而Object.defineProperty只能遍历对象属性直接修改
Proxy作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利

Object.defineProperty的优势如下:

兼容性好,支持IE9