Vue数据响应式底层原理

Vue数据响应式底层原理

数据响应式定义：（当数据变化的时候，会自动运行一些相关函数）

• 原理就是通过Object.defineProperty() 对属性进行劫持，当访问该属性时我们就收集依赖，当数据发生改变后就派发更新

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;
        // 自动调用依赖（某个函数在运行期间用到了这个属性，更准确的说 某个函数在运行期间用到了这个get方法）该属性的值
        // （派发更新）运行：执行在用我的函数
        for(let i = 0; i < funcs.length; i++) {
          funcs[i]();
        }
      }
    })
  }
}

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