ue3 computed watch 和 watchEffect 使用和区别

在 Vue 3 中，computed、watch 和 watchEffect 都是响应式系统的一部分，但它们各自有不同的用途和行为。

computed

用途：用于声明性地描述依赖数据和计算值的关系。computed 属性会根据它们的依赖进行缓存，并且只有当依赖发生变化时才会重新计算。

使用方式：通常用于模板中，可以直接访问计算属性的值，不需要 .value。

特点：

缓存结果，只有依赖变化时才重新计算。

可以定义 getter 和 setter，允许计算属性双向绑定。

通常用于组合多个响应式数据源，返回一个新的值。

watch

用途：用于观察和响应 Vue 实例上的数据变化，可以监听单个数据源或计算属性的变化。

使用方式：可以指定深度监听（deep），并且可以监听多个数据源。

特点：

可以监听响应式引用（ref）或响应式对象（reactive）的属性。

可以执行异步操作。

可以停止监听（通过返回一个清除函数）。

watchEffect

用途：用于自动追踪响应式引用、响应式对象或 Ref/ReactiveEffect 的变化，并在变化时执行副作用。

使用方式：在 setup 函数中使用，接受一个函数作为参数，该函数中的操作会被自动追踪。

特点：

不需要显式声明依赖，Vue 会自动追踪在函数中使用的所有响应式状态。

没有返回值，只执行副作用。

通常用于处理不需要返回值的响应式数据变化。

使用示例

cpp 复制代码

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 适用于处理不需要返回值的响应式数据变化，特别是当需要自动追踪多个响应式状态时。