Vue3中的响应式原理

通过Proxy(代理): 拦截对象中任意属性的变化, 包括: 属性值的读写、属性的添加、属性的删除等。

通过Reflect(反射): 对被代理对象的属性进行操作。

其中Reflect也是ES6为了操作对象而提供的API, 为了防止直接操作对象(object, 函数), 比较之前的Object.defineProperty()等这些语言层面的替代API(个人理解)

 <script>
      // 源数据
      let data = {
        name: "张三",
        age: 18,
      };

      // 模拟Vue3中实现响应式
      const p = new Proxy(data, {
        // 有人读取p的某个属性时调用
        get(target, propName) {
          console.log(`有人读取了p身上的${propName}属性`);
          return Reflect.get(target, propName);
        },
        // 有人修改p的某个属性或给p追加某个属性时调用
        set(target, propName, value) {
          console.log(`有人修改了了p身上的${propName}属性, 我要去更新页面了`);
          return Reflect.set(target, propName, value);
        },
        // 有人删除p的某个属性时调用
        deleteProperty(target, propName) {
          console.log(`有人删除了p身上的${propName}属性, 我要去更新页面了`);
          return Reflect.deleteProperty(target, propName);
        },
      });

    </script>