watchEffect 内修改外部的值，为什么没有出现死循环？

遇到了一个比较疑惑的点，理论上应该存在无限循环的风险，因为 watchEffect 会在依赖项（即 count.value）发生变化时重新执行，并且每次执行时都修改了 count.value。

然而，实际并不会导致无限循环，因为 Vue3 内部对响应式系统进行优化，防止产生这种行为。

import { ref, watchEffect } from 'vue';
const count = ref(0);
watchEffect(() => {
  if (count.value < 5) {
    count.value++;
    console.log(count.value);
  }
});
window.count = count;

1. Vue3 的批处理机制

Vue3 使用了批处理机制优化视图更新和响应式数据的处理。所有的响应式更新都是异步的，Vue会将其放在一个队列中，等到下一个事件循环再一起处理。 

在这个过程中，Vue 会对相同的响应式依赖项的多次修改进行“去重”处理，确保每个依赖项的更新只会被执行一次。这意味着当 count.value 发生变化时，它不会立即触发 watchEffect 的执行，而是会等待当前的同步任务完成后再批量处理依赖的更新。

2. 避免无限循环的优化

Vue 3 通过这种异步批处理和去重机制，避免了简单的无限循环。例如，当 count.value++ 被执行时，虽然它改变了 count.value，但 Vue 会现将这个变化暂时缓存下来，而不是立即触发 watchEffect 再次执行。

在下一个 tick 中，Vue 会检查 count.value 的依赖并重新执行 watchEffect，但由于 count.value 的变化是批处理的，Vue 只会重新执行一次 watchEffect。这就避免了因为同步多次修改而导致的无限循环。

3. 执行次数限制

即使在某些情况下 watchEffect 可能会多次触发，Vue 也有内部机制来限制响应式副作用的执行次数，以防止因为复杂的依赖关系或循环依赖导致的无限循环。

实际结果

watchEffect 会在执行函数体之前清除所有依赖，然后，当 count.value 被访问时，会重新收集依赖。当 count.value++ 被执行时，会立即更新并触发 watchEffect 重新执行。

由于 count.value 在 watchEffect 的第一次执行中被增加到 1，watchEffect 立刻执行。但在第二次执行中，count.value 的初始值已经是 1，这时 if（count.value<5）的判断为 true，count.value++ 再次被执行，但这个过程是同步的。Vue 的异步机制防止它再一次触发 watchEffect，所以在这轮循环中，watchEffect 只会输出一次结果，即 1。