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>