vue3中watch怎么使用

在Vue 3中，watch函数用于监听数据的变化，并在数据发生变化时执行一些自定义的操作。watch函数支持多种用法，可以监听响应式对象、计算属性、ref对象等等。

下面是watch函数的使用方法示例：

1. 监听响应式对象的变化：

import { reactive, watch } from 'vue';

const state = reactive({
  count: 0,
});

watch(() => state.count, (newValue, oldValue) => {
  console.log(`count发生变化，新值为：${newValue}，旧值为：${oldValue}`);
});

2. 监听计算属性的变化：

import { computed, watch } from 'vue';

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

watch(doubleCount, (newValue, oldValue) => {
  console.log(`doubleCount发生变化，新值为：${newValue}，旧值为：${oldValue}`);
});

3. 监听ref对象的变化：

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`count发生变化，新值为：${newValue}，旧值为：${oldValue}`);
});

需要注意的是，在使用watch函数时，我们要合理选择监听的目标以及回调函数的执行时机，避免出现性能问题。