vue3源码学习-5-分支切换

发表于 更新于 分类于 阅读次数：

前言

上篇回顾，核心代码逻辑是通过 reactive 中的 Proxy()来代理一个对象，然后通过 get 收集依赖，主要操作放在来 effect 中。那么当我们回顾上一篇的问题。当用户有一个这样当操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const { effect, reactive } = VueReactivity;
let target = { name: "david", age: 12, address: { num: 567 }, flag: true };
const state = reactive(target);
effect(() => {
  console.log("render");
  document.getElementById("app").innerHTML = state.flag
    ? "姓名:" + state.name
    : "年龄:" + state.age;
});
setTimeout(() => {
  state.flag = false;
  setTimeout(() => {
    console.log("修改了name，原则不重新渲染");
    state.name = "jack";
  }, 1000);
}, 1000);

第一次，执行来用户的渲染操作，然后在之后的操作中修改来 flag。这个时候，依赖收集的应该是 flag 和 name，如果采用上篇中的代码，那么实际上，旧的 name 依赖未被清除，还是会留在 deps 中，那么你修改 name 的时候会触发渲染。

effect 分支删除

上面的问题已经很清晰来，那么如果解决呢。可以在用户函数执行之前，把旧的依赖全部清空，再收集一次这个依赖不就行了。这样第一次收集了 flag，name 依赖。第二次 flag 变成 flase,清空依赖，收集 flag 和 age 以来，这样第三次修改 name 值的时候就不会触发渲染了。
前一篇中定义的 deps 也派上了用场，由于之前做了双向收集，那么在执行用户操作之前，清空依赖就行了。
定义一个clearupEffect()函数。

1
2
3
4
5
6
7
function clearupEffect(effect: ReactiveEffect) {
  let { deps } = effect;
  for (let i = 0; i < deps.length; i++) {
    deps[i].delete(effect);
  }
  effect.deps.length = 0;
}

放入到 this.fn()被执行之前，来清除依赖。但是这里会有个新问题，看代码。

8f376f8a3e3126b04ef5d.png

这里执行了清空，下面执行了this.fn()又会触发渲染，然后由于使用的是Set()来存储关系的， Set()一边清空一边添加依赖，导致了死循环，会一直触发渲染。为此依赖触发的方法要进行修改，我们拷贝一份Set()，然后在他的基础上删除清空，这样就不会造成死循环了。

1
2
3
4
5
6
7
8
9
10
11
// 此处做逻辑修改，因为set在删除之后，再做添加，那么会造成死循环，有些方法会对数据拷贝之后再做修改
// 可以避免这个问题
if (effects) {
  effects = new Set(effects);
  effects.forEach((effect) => {
    if (activeEffect !== effect) effect.run(); // 如果这里直接就写effect.run()，那么会遇到这种情况，在模版中赋值，那么也会触发这个，
    // 然后又通过了依赖收集的时候，运行它的第一次run（）。就会导致循环调用，爆栈，
    //所以这里需要加一个判断是否是当前的effect,如果是的话，就忽略这一次的赋值触发的run();
    //注意目前的代码是不支持异步的
  });
}

完整的 effect 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
export let activeEffect = undefined;

function clearupEffect(effect: ReactiveEffect) {
  let { deps } = effect;
  for (let i = 0; i < deps.length; i++) {
    deps[i].delete(effect);
  }
  effect.deps.length = 0;
}

class ReactiveEffect {
  // 这里代表在实例上新增active属性
  public active = true; // 这个effect默认是激活状态
  public parent = null; // 记录当前effect的父亲是谁，用作返回
  public deps = []; // 记录当前的effect都记录了哪些属性
  constructor(public fn) {} // 用户传递的参数也会绑定在this上 相当于this.fn = fn;
  run() {
    // run就是执行effect
    if (!this.active) {
      // 如果是非激活状态就是非激活状态，只需要执行函数，不需要进行依赖收集
      this.fn();
    }
    // 这里就要依赖收集了，核心就是当前的effect和稍后渲染的属性关联在一起
    try {
      this.parent = activeEffect;
      activeEffect = this;

      //在执行用户函数之前把依赖清空，再次收集
      clearupEffect(this);

      return this.fn(); // 当稍后调用取只操作的时候就可以获取到这个全局的activeEffect了
    } finally {
      activeEffect = this.parent;
    }
  }
}

export function effect(fn) {
  // 这里的fn可以根据状态的变化，重新执行，effect可以嵌套着写
  const _effect = new ReactiveEffect(fn); //创建响应式的effect
  _effect.run(); //默认先执行一次
}

// 实例代码
// effect(() => { age =>  e1
//   state.age;

//   effect(() => { name => e2
//     stage.name;
//   })

//   stage.name; name => e1
// })
// 以前呢vue3.0的时候采用栈的方法将对象压栈,然后执行完成之后弹出这样就能关联
// 对应的effect
// 现在的做法是记录effect的父亲是谁，这样每次执行之后就把activeEffect 赋值为父亲对象
let targetMap = new WeakMap();
export function track(target, type, key) {
  // 在effect中的回调函数中，我们通过语句中执行的target属性收集到effect
  // 那么就有了target属性指到哪个effect，
  // 那么我们就明确了对象 某个属性-> 多个effect
  // 对象作为key,那么第一眼想到WeakMap,并且它还有个好处，当value为空的时候会被
  // 垃圾回收机制会回收它
  // 那么上述的数据结构应该是 {对象:Map{name:Set}}
  if (!activeEffect) return; // 如果你不是在模版中触发了get，那么这个依赖就不要收集
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map()));
  }
  let dep = depsMap.get(key);
  if (!dep) {
    depsMap.set(key, (dep = new Set()));
  }
  let shouldTrack = !dep.has(activeEffect); //一个属性多次依赖同一个effect那么去重
  if (shouldTrack) {
    dep.add(activeEffect);
    activeEffect.deps.push(dep); // 让deps记录住对应的dep，稍后在清理的地方用到
  }
  // 这里单向收集了这个依赖，对象的属性->effect
  // 但是这样不方便。例如你有这么一个模版渲染
  // effect(() => {flag ? state.age : state.name})
  // 那么在你flag判断为true和false的时候依赖的关联是不一样的
  // 所以我们也需要收集effect -> 属性
  // 在 ReactiveEffect上添加一个数组，来收集当前effect记录了哪些属性
}

export function trigger(target, type, key, value, oldValue) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return; //触发的值不在模版中
  let effects = depsMap.get(key);

  // 此处做逻辑修改，因为set在删除之后，再做添加，那么会造成死循环，有些方法会对数据拷贝之后再做修改
  // 可以避免这个问题
  if (effects) {
    effects = new Set(effects);
    effects.forEach((effect) => {
      if (activeEffect !== effect) effect.run(); // 如果这里直接就写effect.run()，那么会遇到这种情况，在模版中赋值，那么也会触发这个，
      // 然后又通过了依赖收集的时候，运行它的第一次run（）。就会导致循环调用，爆栈，
      //所以这里需要加一个判断是否是当前的effect,如果是的话，就忽略这一次的赋值触发的run();
      //注意目前的代码是不支持异步的
    });
  }
}
1
git:[@github/MicroMatrixOrg/vue3-plan/tree/effect_schedule]