Vue2 是通过使用 Object.defineProperty 给对象的属性添加 getter 和 setter 劫持对属性的操作实现 data 到 UI 的响应式的, 有如下缺点:
- defineProperty 无法劫持对属性的动态添加和删除,需要调用 Vue.set 和 Vue.delete 做到响应式
- 无法监听对数组的修改,Vue2 修改了数组的原生 API
- 如果有多个属性, 就要提前递归遍历所有属性做到响应式
Proxy 可以劫持整个对象,也可以监听数组的变化,可以在真正用到深层数据的时候再做响应式。