vue3组合式api侦听器watch的用法

Vue 3 的组合式 API 中，侦听器 Watcher 的用法如下：

1. 在组件中导入 `watch` 函数：`import { watch } from 'vue';`

2. 在 `setup` 函数中使用 `watch` 函数来创建侦听器：

import { watch } from 'vue';

setup() {
  // 创建一个侦听器
  watch(
    // 要侦听的变量或表达式
    () => {
      // 返回要侦听的数据
      return state.value;
    },
    // 回调函数，当侦听的变量或表达式发生变化时执行
    (newValue, oldValue) => {
      // 在这里处理变化后的逻辑
      console.log('New value:', newValue);
      console.log('Old value:', oldValue);
    }
  );

  // ...
}

在上面的示例中，我们传递了两个参数给 `watch` 函数。第一个参数是一个函数，返回我们要侦听的数据，这个函数可以包含一个或多个变量或表达式。第二个参数是一个回调函数，当侦听的数据有变化时，这个回调函数将被触发。

在回调函数中，我们可以访问到变化后的值 `newValue` 和变化前的值 `oldValue`。你可以在回调函数中编写你想要执行的逻辑，例如更新页面内容或执行其他操作。

请注意，返回要侦听的数据的函数可以返回任何合法的 JavaScript 值，不限于 Vue 响应式数据。