乐趣区

关于vue3:Vue3中响应式原理reactive模拟实现

jiezi

reactive

reactive 是 Vue3 中提供实现响应式数据的办法.
在 Vue2 中响应式数据是通过 defineProperty 来实现的.
而在 Vue3 响应式数据是通过 ES6 的 Proxy 来实现的

reactive 参数必须是对象 (json/arr)
如果给 reactive 传递了其余对象, 默认状况下批改对象, 界面不会自动更新, 如果想更新, 能够通过从新赋值的形式.

这里应用 Reflect 来实现
Reflect 对象与 Proxy 对象一样，也是 ES6 为了操作对象而提供的新 API。Reflect 对象的设计目标
(1）将 Object 对象的一些显著属于语言外部的办法（比方 Object.defineProperty），放到 Reflect 对象上。现阶段，某些办法同时在 Object 和 Reflect 对象上部署，将来的新办法将只部署在 Reflect 对象上。也就是说，从 Reflect 对象上能够拿到语言外部的办法。
（2）批改某些 Object 办法的返回后果，让其变得更正当。比方，Object.defineProperty(obj, name, desc) 在无奈定义属性时，会抛出一个谬误，而 Reflect.defineProperty(obj, name, desc)则会返回 false。
（3）让 Object 操作都变成函数行为。某些 Object 操作是命令式，比方 name in obj 和 delete obj[name]，而 Reflect.has(obj, name)和 Reflect.deleteProperty(obj, name)让它们变成了函数行为。
（4）Reflect 对象的办法与 Proxy 对象的办法一一对应，只有是 Proxy 对象的办法，就能在 Reflect 对象上找到对应的办法。这就让 Proxy 对象能够不便地调用对应的 Reflect 办法，实现默认行为，作为批改行为的根底。也就是说，不论 Proxy 怎么批改默认行为，你总能够在 Reflect 上获取默认行为。
阮一峰 ES6 有介绍

代码实现

const isObject = (val) => val !== null && typeof val === "object";
const convert = (target) => (isObject(target) ? reactive(target) : target);
const hasOwnProperty = Object.prototype.hasOwnProperty;
const hasOwn = (target, key) => hasOwnProperty.call(target, key);

export function reactive(target) {if (!isObject(target)) return target;
  const handler = {get(target, key, receiver) {
      // 收集依赖
      console.log("get", key);
      const result = Reflect.get(target, key, receiver);
      return convert(result);
    },
    set(target, key, value, receiver) {const oldValue = Reflect.get(target, key, receiver);
      let result = true;
      if (oldValue !== value) {result = Reflect.set(target, key, value, receiver);
        // 触发更新
        console.log("set", key, value);
      }
      return result;
    },
    deleteProperty(target, key) {const hadKey = hasOwn(target, key);
      const result = Reflect.deleteProperty(target, key);
      if (hadKey && result) {
        // 触发更新
        console.log("delete", key);
      }
      return result;
    },
  };

  return new Proxy(target, handler);
}

测试代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script type="module">
      import {reactive} from "./index.js";
      const obj = reactive({
        name: "zs",
        age: 18,
      });
      obj.name = "lisi";
      delete obj.age;
      console.log(obj);
    </script>
  </body>
</html>
退出移动版