三
三月小生

把学习和生活慢慢写下来

技术

依赖清理

# 前端 # Vue

第一步

上面的依赖收集中，会有这么个问题，如下：

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app"></div>

<script type="module">
  import { reactive, effect } from './reactivity.js';

  let obj = { name: 'xiaoming', age: 18, flag: true };
  const state = reactive(obj);

  effect(() => {
    app.innerHTML = state.flag ? state.name : state.age;
  })
  setTimeout(() => {
    state.flag = false;
    
    setTimeout(() => {
      state.name = 'xiaosheng';
    })
  }, 1000);
</script>
</body>
</html>

上面的代码中，当 flag 的值是 true 的时候，收集的是 name 这个属性，但是，当在定时器中将修改了 flag 的值后，收集了 age 这个属性，同时，这个时候，name 这个属性还被收集着，然后在定时器中修改了 name 的值之后，这个时候就不应该在收集了才对，所以需要做一下依赖清理，清理是使用了一个简单的 diff 算法来处理的

每次在收集依赖之前，将上一次的依赖给清空了

effect.ts

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
...
// -----------------------------新增开始-----------------------------
function preCleanEffect(effect) {
  effect._depsLength = 0;
  effect._trackId++;
}
// -----------------------------新增结束-----------------------------

class ReactiveEffect {
  // 用于记录当前 effect 执行了多少次
  _trackId = 0;
  // 用来记录存放了哪些 effect
  deps = [];
  _depsLength = 0;

  ...

  run() {
    ...
    try {
      activeEffect = this;
      
			// -----------------------------新增开始-----------------------------
      // 清空依赖
      preCleanEffect(this);
			// -----------------------------新增结束-----------------------------
      
      // 如果是激活的，则做依赖收集
      return this.fn();
    } finally {
      // 当 effect 函数执行完毕后，应该将其置为空，否则的话，只是单纯的使用代理后的对象的时候，也会触发依赖收集
      activeEffect = lastEffect;
    }
  }
}
...

第二步

重新收集依赖，现在如果同一个属性对应同一个 effect 的话，会收集多次，应该是只收集一次，但是 effect 中的 _trackId 递增才对，即针对这种情况做处理，下面这种情况，name 属性应该只收集一次

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app"></div>

<script type="module">
  import { reactive, effect } from './reactivity.js';

  let obj = { name: 'xiaoming', age: 18, flag: true };
  const state = reactive(obj);

  effect(() => {
    app.innerHTML = state.name + state.name + state.name;
  })
</script>
</body>
</html>

effect.ts

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
...

// -----------------------------新增开始-----------------------------
function postCleanEffect(effect) {
  if (effect.deps.length > effect._depsLength) {
    for (let i = effect._depsLength; i < effect.deps.length; i++) {
      // 删除映射表中多余的部分
      cleanDepEffect(effect.deps[i], effect);
    }

    // 更新依赖列表长度
    effect.deps.length = effect._depsLength;
  }
}

function cleanDepEffect(dep, effect) {
  dep.delete(effect);
  if (dep.size === 0) {
    // 如果整个 map 是空的话，就删除这个属性
    dep.cleanup();
  }
}

export function trackEffect(effect, dep) {
  // 需要重新收集依赖，将需要的移除掉
  if (dep.get(effect) !== effect._trackId) {
    // dep 中关联 effect
    dep.set(effect, effect._trackId);

    const oldDep = effect.deps[effect._depsLength];
    // 如果没有收集过，则收集
    if (oldDep !== dep) {
      if (oldDep) {
        // 删除老的
        cleanDepEffect(oldDep, effect);
      }
      // 更换成新的
      effect.deps[effect._depsLength++] = dep;
    } else {
      effect._depsLength++;
    }
  }
}
// -----------------------------新增结束-----------------------------

...