多依赖时 effect 又为何被成倍触发？

解决了一个变量所带来的问题后, 有引来了新的问题

在真实的开发场景中一个 effect 往往需要依赖多个响应式变量现在加入第二个让 effect 同时依赖 flag count

html

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<button id="btn">按钮</button>
<script type="module">
  // import { ref, effect } from '../../../node_modules/vue/dist/vue.esm-browser.prod.js'
  import {ref, effect} from '../dist/reactivity.esm.js'

  const flag = ref(true)

  const count = ref(0)

  const e = effect(() => {
    flag.value
    count.value
    console.count('effect')
  })
  console.dir(e)

  btn.onclick = () => {
    count.value++
  }
</script>
</body>
</html>

但是当依赖函数同时依赖两个响应式变量后又会发生成倍的增长这是为什么捏

流程分析

初始化

effect 执行一次, 依次收集 flag count 初始化加载的时候,effect 执行一次。读取 flag count 进行依赖收集

flag 通过 link1 与 effect 关联
count 通过 link2 与 effect 关联
同时 effect 也通过 deps 记录了 link1 -> link2

第一次点击

depsTail 被设置为 undefined
deps 仍然执行 link1

然而(deps && !depsTail)的状态是用来判断是否 "正在重新执行" 的关键

读取 flag.value 触发第一次的 link

effect 重新执行, 读取 flag 触发 link
link 的判断
- (sub.deps && !sub.depsTail) 成立
- 且 sub.deps.dep === dep(表示 link1 的 dep 为 flag)
复用成功, 将 depsTail 移动到 link1

读取 count.value 触发第二次的 link

effect 重新执行, 读取 count 触发 link
link 的判断
- (sub.deps && !sub.depsTail) 不成立, 因为 depsTail 已被赋值, 不再是 undefined
- 复用失败, 创建了一个新的 link3 节点, 并移动指针

这样的话就会导致在下一次点击的按钮的时候, 造成几何倍数的增加。

流程分析 ​

流程分析