vue处理响应式的思路

首先看如下js代码

let a = '张三'
console.log(a)
// 当前页面展示的是张三
a = '李四'

首先页面刚开始渲染的时候数据a为张三，之后将a修改为了李四以后页面不会发生改变，但是数据已经修改了，vue为了解决这一问题，采用响应式的办法。

通过对象的defineProperty方法，在回调函数中监听；

Object.defineProperty(obj, key, {
      get: function () {
        //  依赖收集，记录：是哪个函数在用我return internalValue;
      },
      set: function (val) {
        internalValue = val;
        // 派发更新，运行：执行用我的函数
      },
    });

要考虑到当然不是只给一个固定的函数使用，所以会涉及到自动读取需要进行响应的对象，并通过数组对其进行保存，最后通过set函数进行派发更新

function observe(obj) {
  for (const key in obj) {
    let internalValue = obj[key];
    let funcs = [];
    Object.defineProperty(obj, key, {
      get: function () {
        //  依赖收集，记录：是哪个函数在用我
        if (window.__func && !funcs.includes(window.__func)) {
          funcs.push(window.__func);
        }
        return internalValue;
      },
      set: function (val) {
        internalValue = val;
        // 派发更新，运行：执行用我的函数
        for (var i = 0; i < funcs.length; i++) {
          funcs[i]();
        }
      },
    });
  }
}

function autorun(fn) {
  window.__func = fn;
  fn();
  window.__func = null;
}