Vue2.0和3.0的响应式原理的区别

1. Vue2 Object.defineProperty

vue2的响应式原理已经说过了，利用Object.defineProperty方法深度遍历data 返回的对象中的每一个属性，重写 get 、 set 方法。。。

这样存在的问题包括：

• 由于需要深度遍历对象的每一个属性，因此存在性能问题
• 无法用此方法监听数组的每一项，因此通过改变数组的下标无法触发视图更新
• 由于这种方式是事先对每个属性进行了依赖收集，因此当新增一个属性的时候也是无法监测到的

2. Vue3 Proxy

对于vue2响应式存在的上述问题，vue3的使用proxy完美的解决了

首先说下什么是Proxy？官方解释：

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

那么为什么Proxy能解决上述问题，它和Object.defineProperty一个最大的区别就是，Proxy监测的是整个对象，而不是对象的属性，因此这个对象发生任何变化，都可以监听的到。

简单的看一段Proxy代理一个对象的代码：

new Proxy(data, {
  // 拦截读取属性值
  get(target, prop) {
    return Reflect.get(target, prop)
  },
  // 拦截设置属性值或添加新属性
  set(target, prop, value) {
    return Reflect.set(target, prop, value)
  },
  // 拦截删除属性
  deleteProperty(target, prop) {
    return Reflect.deleteProperty(target, prop)
  }
})