vue3,watch

Vue 3 中的 watch 选项与 Vue 2 中的 watch 选项有一些不同。在 Vue 3 中，watch 选项被替换为了一个新的 API，即 watch 函数。这个函数接收两个参数：要观察的响应式数据和回调函数。

下面是一个使用 watch 函数的示例代码：

import { watch } from 'vue';

export default {
  data() {
    return {
      message: 'Hello, Vue 3!',
    };
  },
  created() {
    watch(
      () => this.message,
      (newValue, oldValue) => {
        console.log('Message changed:', newValue, oldValue);
      }
    );
  },
};

在上述示例中，我们使用 watch 函数来观察 `message` 数据的变化，并在数据发生变化时执行回调函数。回调函数接收两个参数：新值 `newValue` 和旧值 `oldValue`。

需要注意的是，在 Vue 3 中，watch 函数默认是立即执行的。如果你只希望在监听到数据变化后执行回调函数，可以传递一个选项对象作为第三个参数，设置 `immediate: false`。

除了基本用法之外，Vue 3 的 watch 函数还提供了更多的高级用法，比如可以监听多个数据或者使用 computed 属性。你可以参考 Vue 3 的官方文档来了解更多详细信息。