vue3 computed 监听

在Vue 3中，你可以使用`watchEffect`和`watch`来监听`computed`属性的变化。

首先，使用`watchEffect`函数可以直接监听一个`computed`属性的变化。当`computed`属性内部依赖的响应式数据发生变化时，`watchEffect`函数会重新运行，从而触发相关的副作用。

下面是一个示例：

import { computed, watchEffect } from 'vue';

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

watchEffect(() => {
  console.log('doubleCount changed:', doubleCount.value);
});

在上面的例子中，我们创建了一个名为`count`的响应式数据和一个名为`doubleCount`的`computed`属性，它依赖于`count`。然后使用`watchEffect`函数来监听`doubleCount`属性的变化，并在控制台输出。

除了`watchEffect`函数外，你还可以使用`watch`函数来监听`computed`属性的变化，并执行相应的回调函数。不同于`watchEffect`，你需要明确指定要监听的属性，并在回调函数中处理属性变化的逻辑。

下面是一个使用`watch`函数来监听`computed`属性的示例：

import { computed, watch } from 'vue';

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

watch(doubleCount, (newVal, oldVal) => {
  console.log('doubleCount changed:', newVal);
});

在上面的例子中，我们使用`watch`函数来监听`doubleCount`属性的变化。当`doubleCount`发生变化时，回调函数会被触发，并且可以访问新值和旧值。