vue3 watch监听函数

在 Vue 3 中，watch 监听函数的使用方法有所变化。在 Vue 3 中，你可以使用 `watch` 函数来创建一个监听器，它接受两个参数：要监听的数据和回调函数。

下面是一个示例：

import { watch } from 'vue';

export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    watch(
      () => this.message,
      (newValue, oldValue) => {
        console.log('message 变化了:', newValue, oldValue);
      }
    );
  }
}

在上面的例子中，我们使用 `watch` 函数来监听 `message` 数据的变化。第一个参数是一个函数，返回要监听的数据（这里是 `this.message`）。第二个参数是一个回调函数，当数据发生变化时会被调用，并传入两个参数：新的值和旧的值。

需要注意的是，在 Vue 3 中，`watch` 函数不再返回一个取消监听的函数。如果你需要手动取消监听，可以将 `watch` 函数的返回值设置为一个变量，并在需要取消监听时调用它。

此外，Vue 3 还引入了新的 API `watchEffect`，它可以更方便地实现监听效果。你可以通过 `watchEffect` 直接监听一个响应式数据，并在回调函数中执行相应的操作。

希望对你有帮助！如果你有任何疑问，请随时提问。