Vue3 watchEffect异步代码依赖追踪与文档不符的问题咨询

问题背景 #

Vue官方文档中关于watchEffect有这样的提示：

TIP
watchEffect only tracks dependencies during its synchronous execution. When using it with an async callback, only properties accessed before the first await tick will be tracked.

按照这段提示的理解，应该是第一个await之后访问的属性不会触发effect重新执行，但下面的示例中修改state.name后，effect却被触发了，产生了困惑：

<script setup>
import { reactive, watchEffect } from "vue"

const state = reactive({
 count: 0,
 name: 'Leo'
})

const sleep = ms => new Promise(
  resolve => setTimeout(resolve, ms));

watchEffect(async () => {
 console.log(`Count: ${state.count}`)
 await sleep(1000) 
 console.log(`Name: ${state.name}`)
})

state.count++
state.name = 'Cristiano' 
</script>

原因分析 #

核心误区在于：触发effect重新执行的是state.count的修改，而非state.name。

1. state.count是在await之前被访问的，属于watchEffect同步执行阶段追踪到的依赖，所以当你执行state.count++时，会直接触发effect重新运行整个回调函数——包括await之后的代码逻辑。
2. 修改state.name本身并不会触发effect，只是因为state.count的修改导致effect重新执行，才会在await之后打印出新的state.name值，这让你误以为是state.name的修改触发了effect。

如果单独修改state.name（注释掉state.count++），你会发现watchEffect完全不会被触发，这才符合文档提示的规则。

内容的提问来源于stack exchange，提问作者Fotis Adamakis