vue3组合式api watch用法

Vue 3 的组合式 API 提供了一种新的方式来处理组件逻辑，其中之一是通过 `watch` 函数来观察数据的变化并执行相应的操作。

`watch` 函数接收两个参数：要观察的数据和一个回调函数。当被观察的数据发生变化时，回调函数会被触发。

下面是使用 `watch` 函数的基本用法示例：

import { watch } from 'vue';

// 在组合式 API 的 setup 函数中使用 watch
setup() {
  // 要观察的数据
  const count = ref(0);

  // 观察 count 的变化
  watch(count, (newValue, oldValue) => {
    console.log(`count 变为 ${newValue}`);
  });

  // 返回模板中需要的数据和方法
  return {
    count
  };
}

在上面的示例中，我们使用 `ref` 来定义了一个响应式的数据 `count`，然后通过 `watch` 函数来观察 `count` 的变化。当 `count` 发生变化时，回调函数将被触发，并将新值和旧值作为参数传递给回调函数。

除了基本用法之外，`watch` 函数还支持传入第三个参数来配置观察选项。例如，可以使用 `immediate: true` 来在初始渲染时立即执行回调函数。

此外，`watch` 函数还可以观察多个数据。你可以传递一个数组来观察多个数据的变化，或者使用对象语法来观察一个或多个具有更多选项的数据。

希望这个回答能够帮助到你！如果有任何疑问，请随时提问。