【vue3】关于watch与computed的用法看这个就ok

在Vue 3中，watch和computed都用于响应数据的变化，但它们有不同的用途和特性。

computed是基于依赖进行缓存的计算，只有当它的依赖发生变化时，才会重新计算。

import { ref, computed } from 'vue';
 
const count = ref(0);
const doubleCount = computed(() => count.value * 2);
 
console.log(doubleCount.value); // 输出：0
count.value++;
console.log(doubleCount.value); // 输出：2，因为count变为1，导致计算属性重新计算

watch用于观察响应数据的变化，并执行异步操作或者代价高昂的操作。

import { ref, watch } from 'vue';
 
const count = ref(0);
 
watch(count, (newValue, oldValue) => {
  console.log(`count changed from ${oldValue} to ${newValue}`);
});
 
count.value++; // 输出："count changed from 0 to 1"

watch还可以用来观察响应式对象中的属性：

import { reactive, watch } from 'vue';
 
const state = reactive({ count: 0 });
 
watch(() => state.count, (newValue, oldValue) => {
  console.log(`state.count changed from ${oldValue} to ${newValue}`);
});
 
state.count++; // 输出："state.count changed from 0 to 1"

computed通常用于简单的依赖计算，而watch更加强大，可以用来执行更复杂的响应操作。