Vue3.0响应式原理

• 实现方法:

// Vue3.0 响应式原理
// 1). 2.0默认会递归(数据尽量扁平化) 2). 2.0数组改变length是无效的 3). 2.0对象不存在的属性不能被拦截

// proxy 兼容性差 ie11不兼容

let toProxy = new WeakMap(); // 弱引用映射表 es6 放置的是 原对象:代理过的对象
let toRaw = new WeakMap(); // 被代理过得对象:原对象
// 判断是不是对象
function isObject(val) {
  return typeof val === "object" && val !== null;
}

// 判断对象有没有属性
function hasOwn(target, key) {
  return target.hasOwnProperty(key);
}
// 响应式的核心方法
function reactive(target) {
  // 创建响应式对象
  return createReactiveObject(target);
}

// 创建响应式对象
function createReactiveObject(target) {
  if (!isObject(target)) {
    // 如果当前不是对象， 直接返回
    return target;
  }
  // 如果已经代理过了，就将代理过得结果返回;
  let proxy = toProxy.get(target);
  if (proxy) {
    return proxy;
  }
  // 防止代理过得对象再次被代理
  if (toRaw.has(target)) {
    return target;
  }
  let baseHandler = {
    // reflect 优点: 不会报错，而且会有返回值，会替代掉Object上的方法

    // target - 源对象, key - 键值, receiver - 新的proxy代理对象
    get(target, key, receiver) {
      // 收集依赖 订阅 把当前的key和这个effect对应起来
      track(target, key); // 如果目标上的 这个key变化  从新让数组中的effect执行即可

      // console.log('获取');
      // proxy + reflect 反射
      let result = Reflect.get(target, key, receiver);
      // result 是当前获取到的值
      return isObject(result) ? reactive(result) : result; // 是个递归
      // return target[key];
    },
    set(target, key, value, receiver) {
      // 怎么去 识别改属性 还是新增属性
      let hasKey = hasOwn(target, key); // 判断这个属性 以前有没有
      // console.log(key, value);
      // console.log('设置');
      let oldValue = target[key];
      let res = Reflect.set(target, key, value, receiver); // 返回boolean值
      if (!hasKey) {
        trigger(target, "add", key);
        console.log("新增属性");
      } else if (oldValue !== value) {
        // 表示属性更改了
        trigger(target, "set", key);
        console.log("修改属性");
      } // 为了屏蔽无意义的修改
      return res;
      // target[key] = value; //缺点 如果设置没成功 如果这个对象不可以被更改(writable) - 没有返回值
    },
    deleteProperty(target, key) {
      let res = Reflect.deleteProperty(target, key);
      console.log("删除");
      return res;
    }
  };

  let observed = new Proxy(target, baseHandler); // es6
  // 需要记录一下 如果这个对象代理过了 就不要再new了
  // hash表 映射表 {key=>value}
  toProxy.set(target, observed);
  toRaw.set(observed, target);
  return observed;
}

// let obj = {
//   name: 'zk'
// }

// 代理对象
let proxy = reactive({
  name: "zk",

  // 多层代理 通过get方法来判断
  info: {
    n: 10
  }
});

// reactive(proxy);
// reactive(obj);

// proxy.name = '改变的值zk';
// proxy.info.n = 300
// console.log(proxy.name);
// console.log(proxy.info.n);
// delete proxy.name;
// console.log(proxy.name);

// proxy.a
// proxy.name = '改变的值';
// delete proxy.name;

// let arr = [1, 2, 3]
// let proxyArr = reactive(arr)
// proxyArr.push(4)
// proxyArr.length = 4;

// 栈 先进后出{name:[effect]}
let activeEffectStacks = []; // 栈型结果

// 数据结构
// {
//   target: {
//     key: [fn, fn]
//   }
// }

let targetsMap = new WeakMap(); // 集合和hash表

function track(target, key) {
  // 如果这个target中的key变化了 我就执行数组里的方法
  let effect = activeEffectStacks[activeEffectStacks.length - 1];
  if (effect) {
    // 有对应关系 才创建关联
    let depsMap = targetsMap.get(target);
    if (!depsMap) {
      targetsMap.set(target, (depsMap = new Map()));
    }
    let deps = depsMap.get(key);
    if (!deps) {
      depsMap.set(key, (deps = new Set()));
    }
    if (!deps.has(effect)) {
      deps.add(effect);
    }
    // 动态创建依赖关系
  }
  // 什么都不做
}

function trigger(target, type, key) {
  let depsMap = targetsMap.get(target);
  if (depsMap) {
    let deps = depsMap.get(key);
    if (deps) {
      // 将当前key对应的effect依次执行
      deps.forEach(effect => {
        effect();
      });
    }
  }
}

// 响应式副作用
function effect(fn) {
  // 需要把fn这个函数变成响应式的函数
  let effect = createReactiveEffect(fn);
  effect(); // 默认 应该先执行一次
}

function createReactiveEffect(fn) {
  let effect = function() {
    // 这个就是创建的响应式的effect
    return run(effect, fn); // 1.让fn执行 2.把这个effect存到栈中
  };
  return effect;
}

function run(effect, fn) {
  // 运行fn, 并且将effect存起来
  try {
    activeEffectStacks.push(effect);
    fn(); // vue2 利用了js是单线程的
  } finally {
    activeEffectStacks.pop();
  }
}

// 依赖收集 发布订阅
let obj = reactive({
  name: "zk"
});
effect(() => {
  // effect 会执行两次 默认先执行一次 之后依赖的数据发生变化了 会再次执行
  console.log(obj.name, "effect"); // 会调用get方法
});
obj.name = "更改哦1";

• 参考资料: Vue3.0 响应式原理第二节

• 参考资料: Vue 作者尤雨溪为你分享：Vue 3.0 进展@VueConf CN 2018

• 参考资料: 尤雨溪教你写 vue 高级 vue 教程 源码分析

• 个人博客: http://www.start6.cn/