Vue 3：为什么变量观察器不能正常工作？

Question

我的项目中有这样的代码：

<script setup>
import { ref, watch } from 'vue'

const num = ref(null)

// Some condition
if(true) {
  // Doesn't works. Why?
  num.value = 1

  // Works
  //setTimeout(() => {
  //  num.value = 2
  //})
}
// Simple watcher  
watch(num, (newVal, oldVal) => {
  console.log("Num changed to: ", newVal)
})
</script>

当我设置num.value = 1时，我的watcher不起作用。 我怎样才能解决这个问题？ 但是当我使用setTimeout运行时，它是有效的

演示项目在这里

Answer 1

在将其设置为 1 后添加观察者，因此它没有机会捕获它。

Answer 2

首先将num的值更改为 1，然后声明观察者。 为了让它工作，你应该首先调用观察者然后改变值。

setTimeout起作用的原因是它将接收到的回调推送到事件循环中。 在 javascript 中，您有一个称为事件循环的东西，并且 javascript 环境不断查看是否有任何东西推送到它，可以执行（类似于消息队列）。 但是，在当前堆栈完成执行之前，不会执行事件循环中的回调。

对于您的情况，这意味着执行脚本中代码的结尾，设置观察者，然后才执行您给setTimeout的回调。