vue3如何使用watch

在 Vue 3 中，使用 watch 监听数据变化的写法和 Vue 2.x 是不同的。下面是使用 watch 的基本写法：

import { ref, watch } from 'vue';

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

    watch(count, (newValue, oldValue) => {
      console.log(`count 的值由 ${oldValue} 变为 ${newValue}`);
    });

    const increment = () => {
      count.value++;
    };

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

在这段代码中，我们首先使用 ref 创建了一个响应式对象 count，然后使用 watch 监听 count 变化，并在变化时输出相应的日志。watch 的第一个参数可以是一个响应式对象，也可以是一个返回响应式对象的函数。第二个参数是一个回调函数，它会在被监听的变量发生变化时执行。回调函数接收两个参数，分别是变化后的值和变化前的值。

需要注意的是，watch 返回一个函数，调用它可以停止观察 count 的变化。例如：

const stopWatching = watch(count, (newValue, oldValue) => {
  console.log(`count 的值由 ${oldValue} 变为 ${newValue}`);
});

// 停止观察 count 的变化
stopWatching();

使用 watch 时需要注意的是，如果要监听嵌套的数据，或监听多个数据的变化，需要使用新的 API：watchEffect 和 watch 的组合写法。