Vue中watch和computed的区别：什么场景该用哪个

在 Vue 开发中，处理响应式数据变化时，computed（计算属性）和 watch（侦听器）是最常用的两个工具。选错工具会导致代码冗余、性能下降甚至逻辑错误。以下是区分两者并正确选择它们的具体步骤。

1. 理解核心本质：自动计算 vs 手动响应

判断你对数据的处理意图是“产出值”还是“执行动作”。

• computed（计算属性）：像一个自动计算器。只要你给它原材料（依赖的响应式数据），它就自动算出结果并缓存起来。只有原材料变了，它才重新算。
• watch（侦听器）：像一个报警器。它死死盯着某个数据，一旦这个数据变了，就触发你预设的回调函数（去发请求、去操作 DOM 等）。

2. 场景一：需要从现有数据派生新数据时，使用 computed

当你需要将一个或多个数据组合、过滤、格式化成一个新的值用于模板展示时，使用 computed。

1. 定义计算属性函数。
2. 编写逻辑并 return 结果。
3. 在模板中像使用普通变量一样使用它，不要加括号调用。

代码示例：

<script setup>
import { ref, computed } from 'vue';

const firstName = ref('张');
const lastName = ref('三');

// 使用 computed 派生全名
const fullName = computed(() => {
  console.log('执行计算'); // 只有 firstName 或 lastName 变化时才会打印
  return firstName.value + lastName.value;
});
</script>

<template>
  <div>{{ fullName }}</div>
</template>

关键点：

• 缓存机制：如果 firstName 和 lastName 没变，哪怕你读取 100 次 fullName，计算函数也只执行第一次。这是 computed 最大的性能优势。
• 必须返回值：它最终是为了得到一个值，而不是为了去“做某事”。

3. 场景二：需要在数据变化时执行“副作用”时，使用 watch

当数据变化后，你需要执行异步操作（如 API 请求）、昂贵的操作或通知外部系统，且不需要返回值时，使用 watch。

1. 引入 watch 函数。
2. 指定要监听的响应式数据作为第一个参数。
3. 编写回调函数作为第二个参数，在函数内执行副作用逻辑。

代码示例：

<script setup>
import { ref, watch } from 'vue';

const searchQuery = ref('');

// 监听搜索词变化，自动发起请求
watch(searchQuery, (newValue, oldValue) => {
  console.log(`从 "${oldValue}" 变为了 "${newValue}"`);

  // 执行副作用：模拟异步请求
  if (newValue.length > 2) {
    fetchDataFromApi(newValue); 
  }
});

function fetchDataFromApi(query) {
  // 模拟 API 调用
  console.log(`正在搜索: ${query}...`);
}
</script>

关键点：

• 无缓存：只要监听的数据变了，回调函数就会执行。
• 适合异步：这是 watch 的强项，因为 computed 必须同步返回值，不能处理异步等待。

4. 对比与决策参考表

下表总结了两者在不同维度的差异，请根据实际需求查阅。

5. 决策流程图

当你犹豫不决时，参考以下流程图快速做出决定。

注意：流程图中包含空格、换行符、问号和中文标点，已严格按照规范使用英文双引号包裹节点文本。

6. 高阶用法：当两者都能用时

有些场景下，两者都能实现功能，例如判断输入框内容长度。

• 如果只是控制 CSS 类名或简单的文本提示：优先使用 computed。因为它性能更好，代码更简洁。

  const isValid = computed(() => username.value.length > 5);

• 如果长度达标后需要立即弹窗提示或记录日志：必须使用 watch。

  watch(username, (newVal) => {
    if (newVal.length > 5) showToast('用户名可用');
  });