跳到主要内容

ES6实战2-实现 Vue3 effect 源码

1. 前言​

上一节我们实现了 Vue3 的数据劫持功能，并对一些边界值做了处理。但是，当数据改变了我们希望更新试图，这个时候虽然我们能劫持到数据的变化但是没有做任何处理，我们需要对数据的获取和修改增加更新的逻辑，并提供一个 API 给业务用来响应式的处理数据的变化。Vue3 中提供了 effect，当 effect 回调函数中引用的响应式数据变化时，会触发 effect 回调函数的执行，相当于 vue2 中的 watcher。我们来看下面的应用示例：

// /vue-next/public/index.html
<script src="./vue.reactivity.js"></script>
<script>
  const { reactive, effect } = VueReactivity;
  const proxy = reactive({
    name: 'ES6 Wiki',
  })

  effect(() => {
    document.getElementById('app').innerHTML = proxy.name;
  })

  setTimeout(() => {
    proxy.name = 'imooc ES6 Wiki 实战'
  }, 1000)
</script>

上面的代码中我们引入了 Vue3 的 reactivity 库，初始化网页内容后，在 1 秒以后更新网页中的内容。本节我们就来实现 effect 这个 API 的功能，本节源码参考: ES6 Wiki 。

2. effect 实现​

2.1 创建响应式 effect​

effect 在 Vue3 的响应式系统中是一个非常关键的函数，后面的 ref、computed 等函数都会用到 effect 中的功能。在 Vue3 中的 effect 会接受不了两个参数：

effect(fn, options)

基于 Vue3 响应式 API 的 effect 特点，需要将 effect 变成一个响应式函数，effect 的响应式就是当数据变化时 fn 会自动执行。实现 effect 这个函数的一个目标就是，将 effect 回调函数中所有引用了响应式数据的属性收集起来，并和 effect 的回调函数关联上，在数据变化时在执行 effect 的回调函数。也就是上面的测试案例中，proxy 对象的 name 属性在 effect 的回调函数中。要想让 effect 成为响应式的，就需要将 name 和 effect 关联起来，当 name 的值变化了，就执行 effect 的回调函数。

在本节 options 没用到，但是在 computed 中会使用到，本节使用了 options.lazy 属性，用于判断是否在第一次的时候执行回调函数中的内容。effect 中是默认执行回调函数的。

如果要把 effect 变成响应式，需要定义一个创建响应式的方法（createReactiveEffect）用于创建一个 effect 函数。createReactiveEffect 执行后会返回一个 effect 函数，在 createReactiveEffect 函数中会默认执行 fn。

export function effect(fn, options){
  const effect = createReactiveEffect(fn, options)
  if (!options.lazy) {
    effect()
  }
  return effect
}

function createReactiveEffect(fn, options) {
  const effect = function reactiveEffect() {
    return fn();    // 用户创建的回调函数，fn函数内部会对响应式数据进行取值操作
  }
  return effect
}

我们定义一个全局变量 activeEffect，这样做是为了把 effect 存起来，方便后面调用，在取值的时候就可以拿到这个 activeEffect。

let activeEffect;
function createReactiveEffect(fn, options) {
  const effect = function reactiveEffect() {
    activeEffect = effect;
    return fn();
  }
  return effect
}

2.2 属性和 effect 关联​

怎么才能让属性和这个函数进行关联呢？首先我们要创建一个收集函数（track）用于收集属性 key 和 effect 回调函数的关联，并且只有在 effect 中使用到的 key，更新时才会执行 effect 中的回调，所以我们在收集依赖时需要先判断。

function track(target, key) {
  if (activeEffect === viod 0) {
    return;
  }
}

什么时候进行收集呢？effect 回调函数会默认执行，在获取值的时候对响应式对象上的 key 进行依赖收集，也就是在 createGetter 函数中进行收集。

function createGetter() {
  return function get(target, key, receiver) {
    const res = Reflect.get(target, key, receiver);
    if (isSymbol(key)) {
      return res;
    }

    // 依赖收集
    track(target, key);
    
    if (isObject(res)) {
      return reactive(res);
    }
    return res;
  };
}

如何关联呢？就是需要在 target 上的 key 中存放若干个 effect，那这要怎么存放呢？这时我们想到了 WeakMap，创建一个 WeakMap 来保持 target 上的需要关联 effect 的属性。同时，

下面的伪代码数据结构是我们希望存放在 WeakMap 中的映射，其中 target 是目标对象。

{
  target1: {
    key: [effect, effect]
  },
  target2: {
    key: [effect, effect]
  }
}

在存放 effect 时可能还需要给 effect 加上一些标识，如：id、deps、options 等，后面会用到。

Let uid = 0;
function createReactiveEffect(fn, options) {
  const effect = function reactiveEffect() {
    activeEffect = effect;
    return fn();
  }
  effect.id = uid++;
  effect.deps = [];
  effect.options = opntions;
  return effect
}   

const targetMap = new WeakMap();
function track(target, key) {
  if (activeEffect === undefined) {
    return;
  }
  // 目标是创建一个映射：{target1: {name: [effect, effect]},target2: {name: [effect, effect]}}
  let depsMap = targetMap.get(target);  // depsMap存放target的值，是一个Map对象
  if(!depsMap) {    // 如果targetMap中没用target对象，则创建一个。
    targetMap.set(target, (depsMap = new Map()));
  }
  let dep = depsMap.get(key);   // 获取depsMap对象中属性是target上的key值
  if(!dep) {
    depsMap.set(key, (dep = new Set())); // 存放effect的集合
  }
  if(!dep.has(effect)) {
    dep.add(activeEffect);
    activeEffect.deps.push(dep);
  }
}

上面的代码中，收集目标对象上所有的依赖，在 effect 的回调函数中没有使用到的属性，就不需要进行依赖收集。在执行完创建响应式 effec 函数 createReactiveEffect 后需要把 activeEffect 置为 null。

function createReactiveEffect(fn, options) {
  const effect = function reactiveEffect() {
    try {
      activeEffect = effect;
        return fn();
    } finally {
      activeEffect = null;
    }
  }
  return effect
}

上面的代码中 finally 是一定会执行的。在 effect 回调函数中嵌套使用 effect，并且在嵌套的 effect 后还有响应式数据，如果是下面这种写法，state.c = 300 将不会收集。

effect(() => {
  state.a = 100;
  effect(() => {
    state.b = 200;
  })
  state.c = 300;
})

这个时候我们就需要创建一个存放栈的数组（effectStack）来存放 activeEffect，执行完毕后也不用赋值 null 了，通过出栈的形式把最后一个移除，让当前的 activeEffect 值等于 effectStack 最后一个值 effectStack[effectStack.length-1] 。这样我们在执行完创建响应式 effect 函数时，控制权又会交到上一层的 activeEffect 上，这样上面代码中的 state.c=300 就会被收集到第一层的 effect 中去。具体执行代码如下：

const effectStack = [];
function createReactiveEffect(fn, options) {
  const effect = function reactiveEffect() {
    try {
      activeEffect = effect;
      effectStack.push(activeEffect);
        return fn();
    } finally {
      effectStack.pop();
      activeEffect = effectStack[effectStack.length - 1];
    }
  }
  return effect
}

使用栈的还有一个好处可以防止递归执行，在 effect 如果有数据持续变化是如： state.a++ 这样的逻辑就会形成递归。这时需要处理为只执行一次，增加一个条件判断，如下代码：

function createReactiveEffect(fn, options) {
  const effect = function reactiveEffect() {
    if (!effectStack.includes(effect)) {    // 防止死循环
      try {
        activeEffect = effect;
        effectStack.push(activeEffect);
        return fn();
      } finally {
        effectStack.pop();
        activeEffect = effectStack[effectStack.length - 1];
      }
    }
  }
  return effect
}

2.3 执行收集的函数​

上面的内容是依赖收集的过程，主要在响应式数据获取时执行，也就是在调用 createGetter 的时候执行，那么依赖收集完后，当数据发生变化的时候，需要让收集的回调函数依次执行。而执行这样收集函数的过程是在 createSetter 中完成，因为在这里是更新数据的过程。上节中我们在 createSetter 中预留了新增和更新属性的判断：

function createSetter() {
  return function get(target, key, value, receiver) {
        ...
    if (!hadKey) {
      console.log('新增属性');
      trigger(target, 'ADD', key, value)
    } else if (hasChanged(value, oldValue)) {
      console.log('更新属性');
      trigger(target, 'SET', key, value, oldValue)
    }

    return result;
  };
}

Vue3 中执行依赖的函数是 trigger，这个函数一共接受五个参数，在执行 trigger 时会传入修改数据的类型：新增（ADD）和更新（SET），这是 Vue 为了处理不同场景而设置的属性。这里我们先创建 tigger 函数，首先需要判断在 targetMap 中是否有被依赖的对象，没有则直接返回。

export function trigger(target, type, key, newValue, oldValue) {
  const depsMap = targetMap.get(target)
  if (!depsMap) {
    return
  }
}

如何让依赖的 effect 执行呢？

  • 首先要判断 key 是不是 undefined；
  • 获取 key 中的 effect 函数，并执行。
export function trigger(target, type, key, newValue, oldValue) {
  const depsMap = targetMap.get(target)
  if (!depsMap) {
    return
  }
  const run = (effects) => {
    if (effects) {
      effects.forEarch(effect => effect())
    }
  }
  if (key == void 0) {
    run(depsMap.get(key));
  }
}

上面是对对象的处理，但是在处理数组的时候还会有问题，如下代码：

const state = reactive([1,2,3]);
effect(() => {
  document.getElementById('app').innerHTML = state[2];
})

setTimeout(() => {
  state.length = 1;
}, 1000)

上面的代码中，数据变化是直接更新数组的长度，而在 effect 中没有使用 length 属性，所以在更新 length 属性时不会触发 run(depsMap.get(key)); 的依次执行，这样 length 改变 effect 回调函数不会执行，视图也不会被更新。这时就需要对属性是 length 的数组进行验证，如果直接更新的是数组的长度就需要单独处理：

export function trigger(target, type, key, newValue, oldValue) {
  const depsMap = targetMap.get(target)
  if (!depsMap) {
    return
  }
  const run = (effects) => {
    if (effects) {
      effects.forEarch(effect => effect())
    }
  }
  if (key === 'length' && isArray(target)) {
    depsMap.forEarch((deps, key) => {
      if(key === 'length' || key >= newValue) { // newValue是更新后的值，
        run(deps)
      }
    })
  } else {
    if (key == void 0) {
      run(depsMap.get(key));
    }
  }
}

上面的代码是在修改数组 length 属性时，让收集依赖的函数执行。还有一种情况，是在 effect 回调中没有直接取索引的值，而且在修改数组时，直接在超过数组长度的位置上新增一个元素。

const state = reactive([1,2,3]);
effect(() => {
  document.getElementById('app').innerHTML = state;
})

setTimeout(() => {
  state[5] = 5;
}, 1000)

在这种情况下也没有索引 key 进行收集，但是确实使用数组的索引增加了值。这时我们就需要借助 trigger 中的 type 类型来进行处理，当对数组索引进行添加操作时，需要触发数组的更新。

export function trigger(target, type, key, newValue, oldValue) {
  const depsMap = targetMap.get(target)
  if (!depsMap) {
    return
  }
  const run = (effects) => {
    if (effects) {
      effects.forEarch(effect => effect())
    }
  }
  if (key === 'length' && isArray(target)) {
    depsMap.forEarch((deps, key) => {
      if(key === 'length' || key >= newValue) { // newValue是更新后的值，
        run(deps)
      }
    })
  } else {
    if (key == void 0) {
      run(depsMap.get(key));
    }
    switch (type) {
      case 'ADD':
        if(isArray(target)) {
          if(isIntergerKey) {   // 判断key是否是索引类型
            run(depsMap.get('length')); // 新增属性时直接触发length收集的依赖即可
          }
        }
        break;
    }
  }
}

这样我们就基本上实现了 effect 的响应式的源码。

小结​

本节我们主要实现了 Vue3 中 effect 函数，它是一个响应式的函数，在源码实现过程中需要注意几点：

  • 使用 WeakMap 数据结构来存放 target 上的 key 和 effect 的关系；
  • 对 effect 的嵌套处理时，引入了栈的方式来控制当前的 activeEffect 值；
  • 在使用数组时，在对 length 直接修改等操作时进行特殊的处理。