五、Vue3.x中的响应式原理

（一）Vue2.x 的响应式

1.实现原理

1）对象类型

• 通过 Object.defineProperty() 对属性的读取、修改进行拦截（数据劫持）

Object.defineProperty(data, 'count', {
  get(){...},
  set(){...}
});

2）数组类型

• 通过重写更新数组的一系列方法来实现拦截（对数组的变更方法进行了包裹）

2.存在问题

• 对象新增属性、删除属性，界面不会自动更新
• 直接通过下标修改数组，界面不会自动更新

（二）Vue3.x 的响应式

1.实现原理

1）通过 Proxy（代理）

• 拦截对象中任意属性的变化
• 包括：属性值的读写、属性的添加、属性的删除等

2）通过 Reflect（反射）

• 对被代理对象（源对象）的属性进行操作

2.MDN 文档中描述的 Proxy 与 Reflect

• Proxy
• Reflect

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);
  },
});

proxy.name = "Tom";