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`函数时，我们要合理选择监听的目标以及回调函数的执行时机，避免出现性能问题。