三
三月小生

把学习和生活慢慢写下来

技术

防止递归调用

# 前端 # Vue

第一步

按照先有的逻辑，如果像下面这种方式使用的话，会导致死循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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 = Math.random();
  })
</script>
</body>
</html>

name 的值改变了之后，会重新执行 effect 函数，这样就会导致死循环了

第二步

新增是否正在执行的标识 _running，进而来解决这种问题

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
47
48
49
50
51
52
53
...
class ReactiveEffect {
  // 用于记录当前 effect 执行了多少次
  _trackId = 0;
  // 用来记录存放了哪些 effect
  deps = [];
  _depsLength = 0;
  _running = 0;

  run() {
    // 不是激活的，就什么都不做
    if (!this.active) {
      return this.fn();
    }

    let lastEffect = activeEffect;
    try {
      activeEffect = this;

      // 清空依赖
      preCleanEffect(this);
      // -----------------------------新增开始-----------------------------
      this._running++;
      // -----------------------------新增结束-----------------------------

      // 如果是激活的，则做依赖收集
      return this.fn();
    } finally {
      // -----------------------------新增开始-----------------------------
      this._running--;
      // -----------------------------新增结束-----------------------------

      // 清理前几次多余收集的
      postCleanEffect(this);

      // 当 effect 函数执行完毕后，应该将其置为空，否则的话，只是单纯的使用代理后的对象的时候，也会触发依赖收集
      activeEffect = lastEffect;
    }
  }
}

export function triggerEffects(dep) {
  for (const effect of dep.keys()) {
    // -----------------------------新增开始-----------------------------
    if (!effect._running) {
      if (effect.scheduler) {
        effect.scheduler();
      }
    }
    // -----------------------------新增结束-----------------------------
  }
}