我正在尝试理解watchEffect文档中的以下注解
TIP watchEffect仅在同步执行期间跟踪依赖项。当将其与异步回调一起使用时，只有在第一个等待滴答之前访问的属性才会被跟踪。
根据我的理解，第一次await之后的所有内容都不应该触发重新评估，而下面的示例中并非如此。
<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>VuePlayground
当名字改变时，效果就会触发，而根据笔记，这不应该发生。
1条答案
按热度按时间ycl3bljg1#
watchEffect的默认效果是pre，这意味着它将按更改顺序首先调用和最后调用watchEffect第一次调用它自己，因为它是pre，它将立即运行state.count++被调用，watchEffect注意到更改state.name = '...'被调用，但watchEffect不关心end main taskwatchEffect看到更改完成，它将React周期的最后一次称为pre为什么
console.log(Name：...)会连续运行两次，这是由于异步函数的特性被放到了一个单独的任务中，您可以在其他地方引用要使
watchEffect在react循环中仅调用一次，请添加{ flush: 'post' }