在 Vue 3 中，computed、watch 和 watchEffect 都是响应式系统的一部分，但它们各自有不同的用途和行为。
computed
用途：用于声明性地描述依赖数据和计算值的关系。computed 属性会根据它们的依赖进行缓存，并且只有当依赖发生变化时才会重新计算。
使用方式：通常用于模板中，可以直接访问计算属性的值，不需要 .value。
特点：
缓存结果，只有依赖变化时才重新计算。
可以定义 getter 和 setter，允许计算属性双向绑定。
通常用于组合多个响应式数据源，返回一个新的值。
watch
用途：用于观察和响应 Vue 实例上的数据变化，可以监听单个数据源或计算属性的变化。
使用方式：可以指定深度监听（deep），并且可以监听多个数据源。
特点：
可以监听响应式引用（ref）或响应式对象（reactive）的属性。
可以执行异步操作。
可以停止监听（通过返回一个清除函数）。
watchEffect
用途：用于自动追踪响应式引用、响应式对象或 Ref/ReactiveEffect 的变化，并在变化时执行副作用。
使用方式：在 setup 函数中使用，接受一个函数作为参数，该函数中的操作会被自动追踪。
特点：
不需要显式声明依赖，Vue 会自动追踪在函数中使用的所有响应式状态。
没有返回值，只执行副作用。
通常用于处理不需要返回值的响应式数据变化。
使用示例
import { ref, computed, watch, watchEffect } from 'vue';
const count = ref(0);
// 使用 computed
const doubledCount = computed(() => count.value * 2);
// 使用 watch
watch(count, (newValue, oldValue) => {
console.log(`Count changed from ${oldValue} to ${newValue}`);
});
// 使用 watchEffect
watchEffect(() => {
console.log(`The doubled count is: ${doubledCount.value}`);
});
区别总结
依赖追踪：
computed 需要显式声明依赖，并且具有缓存机制。
watch 可以监听单个或多个数据源，可以是响应式引用或对象的属性。
watchEffect 自动追踪在回调函数中使用的所有响应式状态。
返回值：
computed 返回一个计算值，可以有 getter 和 setter。
watch 和 watchEffect 不返回值，watch 用于监听变化并执行回调，watchEffect 用于执行副作用。
使用场景：
computed 适用于需要返回值的计算属性。
watch 适用于需要响应特定数据变化的场景，尤其是当需要执行异步操作或需要停止监听时。
watchEffect 适用于处理不需要返回值的响应式数据变化，特别是当需要自动追踪多个响应式状态时。
