vue3 原理【详解】Proxy 实现响应式

为了解决 vue2 的响应式缺陷 ，vue3 改用 Proxy 实现响应式

使用 Proxy 实现响应式

详见代码注释

// 仿写vue3的reactive -- 声明响应式对象
function reactive(target = {}) {
  //   若目标数据不是对象/数组,则直接返回 （reactive 的参数必须为对象/数组才能添加响应式）
  if (typeof target !== "object" || target == null) {
    return target;
  }

  const proxyConfig = {
    // 访问属性 -- target 目标数据，key 属性 ， receiver 处理后的数据（即objProxy）
    get(target, key, receiver) {
      // 提取出目标数据本身的属性（非原型的属性），结果为属性构成的数组
      const ownKeys = Reflect.ownKeys(target);
      // 若访问的是目标数据本身的属性
      if (ownKeys.includes(key)) {
        // 更新视图
        updateView();
      }

      const result = Reflect.get(target, key, receiver);

      // 递归调用，实现深度监听（与vue2相比提升了性能，因为只在属性被访问时，才触发深度监听，属性没被访问时，不会被监听）
      return reactive(result);
    },
    // 修改属性 -- target 目标数据，key 属性 ，value 新的属性值， receiver 处理后的数据（即objProxy）
    set(target, key, value, receiver) {
      // 如果新的属性值与原属性值相同，则无需处理，直接返回
      if (val === target[key]) {
        return true;
      }

      // 提取出目标数据本身的属性（非原型的属性），结果为属性构成的数组
      const ownKeys = Reflect.ownKeys(target);
      // 若修改的是目标数据本身的属性
      if (ownKeys.includes(key)) {
        // 更新视图
        updateView();
      }
      // 新增的属性
      else {
        // 更新视图（新增的属性，可能更新视图的逻辑不一样）
        updateView2();
      }

      const result = Reflect.set(target, key, value, receiver); // 如果属性只读，则返回 false。如 object.defineProperty writable false

      return result;
    },
    // 删除属性
    deleteProperty(target, key) {
      const result = Reflect.deleteProperty(target, key); // 如果用 delete target[key] ，则返回结果永远都是 true ，而且不是规范的函数式写法

      // 删除属性成功
      if (result) {
        // 更新视图
        updateView();
      }
      return result;
    },
  };

  //通过 Proxy 给目标数据添加响应式
  const observed = new Proxy(target, proxyConfig);
  return observed;
}

// 测试数据
const data = {
  name: "朝阳",
  age: 35,
  info: {
    address: "成都", // 需要深度监听
  },
  nums: [10, 20, 30], // 需要深度监听
};

// 得到响应式数据
const proxyData = reactive(data);

【了解即可】为什么要使用 Reflect ？

• Reflect 的 API 和 Proxy 的 API 相同，让代码更协调一致
• Reflect 能让编程规范化、标准化、函数式

Reflect.has(target, key)
key in target

Reflect.deleteProperty(target, key)
delete target[key]

• Reflect 会替代掉 Object 上的工具函数

Reflect.ownKeys({a: 100})
Object.getOwnPropertyNames({a: 100})

Proxy 的优势

与 vue2 的 Object.defineProperty 相比

• 性能更好 （在访问属性时触发监听，若未访问，则不会监听）
• 可监听属性的新增和删除
• 可监听数组的变化

Proxy 的缺点

• 无法兼容所有浏览器
• 无法 polyfill