使用 watchEffect 实现倒计时

使用 watchEffect 实现倒计时很简单：

<script setup>
import { ref, watchEffect } from "vue";
const counter = ref(10);

watchEffect(() => {
  if (counter.value > 5) {
    setTimeout(() => {
      counter.value--;
    }, 1000);
  }
});
</script>

但是我想讨论的是如果我们去掉 setTimeout 会发现 watchEffect 不会监视到 counter，仅在第一次的时候有效果。

这是因为，修改 counter，以及 watchEffect 会在同一个运行周期内进行，所以会产生该问题，使用 setTimeout 后，会将两个操作分成两个周期，所以可以正常运行。

参考文档：watchEffect

另外补充一个知识点：

1. 在 vue2 中，watch 默认是浅层监视
2. 在 vue3 中，watch 默认是深层监视