watchEffect首个await后响应式属性追踪的疑问及解析

Vue官方教程明确说明：watchEffect仅在同步执行期间追踪依赖，使用异步回调时，仅首个await前访问的属性会被追踪。

你在看示例代码时，误以为todoId.value是在首个await之后访问的，按规则它不应被追踪，但实际该属性却被watchEffect追踪到了，核心误解点在于代码执行顺序：

示例代码：

watchEffect(async () => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  data.value = await response.json()
})

实际todoId.value是在await fetch(...)的参数计算阶段同步访问的——在调用fetch函数时，需要先计算它的参数字符串，这个过程是同步完成的，完全发生在首个await执行之前，因此属于watchEffect会追踪的同步代码范围，所以能被正确追踪。

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