Vue 中 computed 和 watch区别

目录

• 简短总结
• 精简示例（Vue 3 组合式 API，Vue 2 逻辑一致）
• 效果说明
  • 总结

简短总结

1. computed：算新值，有缓存、必须返回结果，适合数据推导/格式化。
2. watch：做操作，无缓存、无返回值，适合监听变化执行副作用（异步、日志等）。

---

精简示例（Vue 3 组合式 API，Vue 2 逻辑一致）

<template>
  <div>
    <input v-model="num1" type="number" /> +
    <input v-model="num2" type="number" /> =
    <p>计算结果（computed）：{{ sum }}</p>

    <br />
    <input v-model="message" placeholder="输入内容触发watch" />
    <p>watch 监听日志：{{ watchLog }}</p>
  </div>
</template>

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

// 1. 响应式变量
const num1 = ref(0);
const num2 = ref(0);
const message = ref('');
const watchLog = ref('');

// 2. computed：计算新值（有返回、有缓存）
// 用途：基于已有数据推导结果，此处计算两数之和
const sum = computed(() => {
  // 依赖不变时，多次访问仅执行一次（缓存）
  return Number(num1.value) + Number(num2.value);
});

// 3. watch：监听变化执行操作（无返回、无缓存）
// 用途：监听 message 变化，执行日志记录（副作用）
watch(message, (newVal, oldVal) => {
  // 数据变化一次，执行一次，无缓存
  watchLog.value = `旧值：${oldVal} → 新值：${newVal}`;
  // 还可在此执行异步请求、DOM 操作等
  // 例如：axios.post('/api/record', { content: newVal });
});
</script>

---

效果说明

1. computed（sum）：修改 num1 或 num2，会自动重新计算求和，多次显示 {{ sum }} 不会重复执行计算（缓存生效）。
2. watch（message）：输入框修改 message，会立即更新监听日志，每次变化都触发回调，适合做额外操作。

总结

1. 数据推导/格式化 → 用 computed（有缓存、更高效）。
2. 监听变化执行异步/复杂操作 → 用 watch（无返回、更灵活）。