vue3 setup 中如何使用watch

在 Vue3 的 setup 函数中，可以通过使用 `watch` 函数来监听变量的变化。`watch` 函数的基本语法如下：

watch(
  watchedValue: Ref | (() => any),
  callback: (newValue: any, oldValue: any) => void,
  options?: WatchOptions
): WatchStopHandle

其中，`watchedValue` 是要监听的变量，可以是一个 `ref` 对象或一个返回值的函数；`callback` 则是变量发生变化时的回调函数，其中 `newValue` 和 `oldValue` 分别表示变化后和变化前的值；`options` 是一些可选的配置项，例如 `deep` 表示是否深度监听对象内部属性的变化；`WatchStopHandle` 则是一个可用于停止监听的函数。

以下是一个使用 `watch` 监听变量变化的示例代码：

import { ref, watch } from 'vue';

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

    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`);
    });

    function increment() {
      count.value++;
    }

    return {
      count,
      increment,
    };
  },
};

在上面的代码中，我们先定义了一个 `count` 变量，并使用 `watch` 函数来监听它的变化。每当 `count` 的值发生变化时，`watch` 函数会自动调用回调函数，输出变化前后的值。在 `increment` 函数中，我们通过修改 `count.value` 的方式来改变 `count` 变量的值，从而触发 `watch` 函数的回调。