vue2的响应式数据原理

1.介绍Object.defineProperty

        vue2的响应式数据是依靠Object.defineProperty这个方法，用法如下：

const obj = {
      username: "zz",
      age: "zz",
    };

    // Object.defineProperty(对象名,对象键名,配置对象)
    Object.defineProperty(obj, "username", {
      get() {
        // 调用obj.username 会运行这个函数
      },
      set() {
        // 给obj.username赋值会运行这个函数
      },
    });

其中配置对象参数有多个可选值：

writable:  是否可以重写该属性


value:  当前值


get:  读取该值时会运行的函数


set:  给该值赋值时会运行的函数


enumerable:  是否可被迭代


configurable:  是否可以再次修改配置项

2.响应式原理

        Object.defineProperty方法的配置对象里面有一个函数get，每次我们访问某个变量时就会通过get函数来获得。set函数在我们给某个变量赋值时也会触发这个函数。基于这套逻辑，我们就可以想到在get方法里去保存访问过这个变量的方法，在set方法里去触发访问这个变量的方法实现数据的更新，思路有了，接下来就是实现。

3.响应式原理的实现

        假设页面上只有一个p元素，代码如下：

    const pEl = document.querySelector("p");

    const data = {
      username: "zr",
    };
    pEl.innerHTML = data.username;

        页面显示：

        

        接下来我们基于上面的逻辑改造一下代码。

// 创建响应式数据对象
    function observer(targetObj, key) {
      // 保存值,不然get方法会无限递归
      const val = targetObj[key];
      Object.defineProperty(targetObj, key, {
        get() {
          return val;
        },
        set(newVal) {
          val = newVal;
        },
      });
    }

    const data = {
      username: "zr",
    };

    observer(data, "username");

    function setUserNameVal() {
      pEl.innerHTML = data.username;
    }
    setUserNameVal();

现在基本的逻辑框架已经出来了，现在的问题是我们无法知道当前是哪个方法在访问变量。解决办法就是创建一个全局变量，通过一个函数来控制这个变量，这个变量就是当前调用变量的方法。再在get方法里面保存这个方法到数组，在set方法里触发这个数组里所有的函数。下面是代码:

let currentFn = null;

    // 更新数据函数
    function update(fn) {
      // 把当前运行的函数保存到全局变量中
      currentFn = fn;
      fn();
      // 收集完依赖后清空
      currentFn = null;
    }
    // 创建响应式数据对象
    function observer(targetObj, key) {
      // 保存值,不然get方法会无限递归
      let val = targetObj[key];
      const fnList = new Set();
      Object.defineProperty(targetObj, key, {
        get() {
          // 如果是update函数访问则添加到依赖列表中,否则就是更新数据所触发的。
          currentFn && fnList.add(currentFn);
          return val;
        },
        set(newVal) {
          val = newVal;
          // 运行所有依赖该数据的函数 更新数据
          fnList.forEach((fn) => {
            fn();
          });
        },
      });
    }

    const data = {
      username: "zr",
    };

    observer(data, "username");

    function setUserNameVal() {
      pEl.innerHTML = data.username;
    }
    update(setUserNameVal);

4.结语

        尤大大还得是尤大大，光一个响应式就蕴含了这么多开发技巧和思想在里面，更别说整个响应式系统和别的功能了，尤大大牛逼！