Vue 3 中使用 watch 和 watchEffect 的使用时机

watch
当你需要对一个或多个响应式引用或计算属性进行监听，并且需要在它们变化时执行异步或开销较大的操作时，应该使用 watch。
watch 允许你访问旧值和新值，因此你可以根据旧值和新值之间的差异来决定是否执行某些操作。
watch 也允许你明确地声明你想要监听的属性，这使得代码的意图更加清晰。
watchEffect
watchEffect 会自动收集依赖项，因此在大多数情况下，你不需要明确指出哪些响应式状态需要被追踪。
当你的副作用不需要关心响应式状态的旧值和新值，只需要在响应式状态改变时重新执行时，watchEffect 是一个更简单的选择。
watchEffect 在组件的生命周期钩子之后立即运行，这意味着无需等待下一个 tick，副作用会立即反映最新的状态。 举个栗子：
 

import { ref, watch, watchEffect } from 'vue';
const count = ref(0);
// 使用 watch 监听 count 的变化
watch(count, (newValue, oldValue) => {
  // 当 count 变化时执行某些操作，你可以访问新旧值
  console.log(`新值: ${newValue}, 旧值: ${oldValue}`);
});
// 使用 watchEffect 自动收集依赖并执行副作用
watchEffect(() => {
  // 这个副作用会在 count 变化时重新执行
  console.log(`count 的当前值是: ${count.value}`);
});

在上面的例子中，使用 watch 可以让你访问到新旧值，并根据这些值来执行操作。而 watchEffect 则更适合那些不需要关心响应式状态具体变化细节，只需要在状态更新时做出反应的场景。