vue3中watch怎么用

在Vue 3中，`watch` API主要用于监听数据的变化，并在数据变化时执行相应的回调函数。Vue 3引入了更简洁的API，使用`setup()`函数时，你可以直接在函数内使用`ref`、`reactive`创建响应式数据，并在这些变量上使用`watch`。

以下是基本的`watch`用法：

import { ref } from 'vue';

// 创建一个响应式的值
const count = ref(0);

// 使用 watch 来监听 count 变化
watch(count, (newCount) => {
  console.log('count changed:', newCount);
}, {
  immediate: true, // 当初始设置时立即执行回调
  deep: true, // 是否深度监听嵌套对象或数组
});

// 更新 count 的值
count.value = 5;

在`setup`中，可以这样使用：

import { setupRef } from 'vue';
import { watchEffect } from '@vue/composition-api';

setup() {
  const count = setupRef<number>(0);

  // 使用 watchEffect 监听 count 变化
  watchEffect(() => {
    console.log('count updated:', count.value);
  });

  // 当需要时更新 count
  count.value = 10;
  // 等效于 count.value = 10;
},

`watchEffect`是基于Composition API的版本，它会自动处理依赖收集和副作用，适用于更复杂的场景。