Vue 3.0 响应式原理精简版

最新推荐文章于 2024-05-10 10:02:48 发布

ArthurHsing

最新推荐文章于 2024-05-10 10:02:48 发布

阅读量170

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/qq_21522331/article/details/114295666

vue 专栏收录该内容

7 篇文章

订阅专栏

本文深入探讨了JavaScript中使用Proxy实现数据响应式的具体方法，包括如何通过WeakMap跟踪原始对象及其代理对象，以及如何在数据变化时触发视图更新。

  <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>