Vue 3.0 响应式原理精简版

  <script>
    const arr = [-1, -2, -3, -4];
    const toProxy = new WeakMap();  //存放的是 代理后的对象
    const toRaw = new WeakMap();  //存放的是 代理前的对象
    const trigger = function () {
      console.log('触发视图更新！');
    }
    const isObject = function (target) {
      return typeof target === 'object' && target !== null;
    }
    const reactive = function (target) {
      if (!isObject(target)) {
        return target;
      }
      const proxy = toProxy.get(target);
      if (proxy) {
        return proxy;
      }
      if (toRaw.has(target)) {
        return target;
      }
      const handler = {
        set(target, key, value, receiver) {
          // 这个判断其实不太准确，详情看下面的思维导图
          if (!target.hasOwnProperty(key)) {
            trigger();
          }
          return Reflect.set(target, key, value);
        },
        get(target, key, receiver) {
          const res = Reflect.get(target, key, receiver)
          if (isObject(target[key])) {
            return reactive(res);
          }
          return res;
        },
        deleteProperty(target, key) {
          return Reflect.deleteProperty(target, key);
        }
      }
      let observed = new Proxy(target, handler);  //es6教程
      toProxy.set(target, observed);  //原对象，代理后的结果
      toRaw.set(observed, target);
      return observed;
    }
    const proxy = reactive(arr);
    // 重复代理
    // reactive(arr);
    // reactive(proxy);
    proxy.splice(0, 2);
    // proxy[4] = 5;
    // proxy.push(9);
    // proxy[4] = 5;
  </script>