vue3watch用法举例

当使用 Vue 3 的 Composition API，你可以使用 `watch` 函数来观察响应式的数据变化并执行相应的操作。下面是一个简单的例子：

import { ref, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watch(count, (newCount, oldCount) => {
      console.log(`count 的值从 ${oldCount} 变为 ${newCount}`);
    });

    return {
      count,
    };
  },
};

在这个例子中，我们创建了一个名为 `count` 的响应式数据，并使用 `watch` 函数来观察它的变化。当 `count` 的值发生变化时，回调函数会被执行，并且会打印出旧值和新值。

你还可以传递一个可选的第二个参数来指定额外的选项，例如：

watch(
  count,
  (newCount, oldCount) => {
    console.log(`count 的值从 ${oldCount} 变为 ${newCount}`);
  },
  { immediate: true } // 立即执行一次回调函数
);

通过设置 `immediate` 为 `true`，可以在开始时立即执行回调函数。

希望这个示例能帮助你理解 Vue 3 中 `watch` 的用法。如果你有更多的问题，请随时提问！