Vue2 与Vue3 响应式原理

1. 响应方式

• Vue2 使用 Object.defineProperty 对数据进行劫持，Vue3 使用 Proxy 对数据进行代理。

2. 区别

• (1) Proxy 可以直接代理整个对象；Object.defineProperty 只能劫持对象中的一个属性，如果要劫持整个对象，需要遍历对象，对每个属性进行劫持。
• (2) Object.defineProperty 本身存在局限，Proxy 没有 Object.defineProperty 中的局限

Object.defineProperty 的局限

1. 无法劫持到对象属性的新增和删除
2. 无法劫持到数组中针对下标修改一个元素
   针对以上两点，Vue2 需要使用 $set 、$delete 方法来实现劫持
3. 无法劫持到数组的 API 方法的调用
   针对这点，Vue2 内部对数组的7个方法做了重写
4. Vue2 中做了重写的7个数组方法：
   push、 pop、 shift、 unshift、 splice、 sort、 reveres

3. 感悟

1. 劫持方法一次只能劫持对象中的一个属性。当要劫持整个对象时，需要循环对象，在每次循环中依次对每个属性做劫持操作。
2. Vue2 中数据与组件的绑定在 cerated 生命周期中进行，劫持操作也是在该生命周期中进行，之后，对象新增及删除的属性没有参与劫持循环，故无法实现响应式。针对这两种情况，Vue2 提供了$set() 、$delete() 两种方法解决。