【vue高频面试题】第3题：Vue 3 中的 computed 是什么？和 watch 有什么区别？什么时候用哪一个？

好的，我们进入 Vue 3 高频题 第 3 题 ，依然保持 完整面试问答模式 + 详细答案 + 代码示例 + 面试亮点。

---

Vue 3 高频题 第 3 题

主问题

问：Vue 3 中的 computed 是什么？和 watch 有什么区别？什么时候用哪一个？

---

面试官追问

1. 基础概念

   • "computed 和 watch 的响应式原理有什么不同？"
   • "computed 是懒执行的，能详细解释吗？"

2. 使用场景

   • "什么时候使用 computed？什么时候使用 watch？"
   • "如果计算值依赖异步数据怎么办？"

3. API 使用

   • "computed 返回函数和对象的写法有什么区别？"
   • "watch 的 immediate 和 deep 选项分别作用是什么？"

4. 性能和优化

   • "computed 和普通方法有什么性能区别？"
   • "使用 watch 时需要注意哪些性能问题？"

---

参考答案 / 回答思路

1️⃣ 基础概念

• computed ：基于依赖的 计算属性，只有依赖变化时才会重新计算

  • 内部基于响应式追踪（依赖收集）
  • 默认是 惰性求值（lazy） ，即只有在访问 .value 时才计算

• watch：观察一个或多个响应式数据的变化，执行副作用函数

  • 用于处理 异步/副作用操作（如 API 请求、DOM 操作）
  • 不返回值，关注的是 "变化通知"

import { ref, computed, watch } from 'vue';

const count = ref(1);

// computed 示例
const double = computed(() => count.value * 2);

// watch 示例
watch(count, (newVal, oldVal) => {
  console.log(`count 从 ${oldVal} 变为 ${newVal}`);
});

---

2️⃣ 使用场景

场景	使用 computed	使用 watch
计算值	是	否
依赖变化执行副作用	否	是
惰性求值	是	否
异步操作	否	是
多个依赖	是	是

总结经验：

• 纯计算 / 派生状态 → computed
• 副作用 / 异步 / 监听变化 → watch

---

3️⃣ API 使用

computed

• 函数写法（只读）

const double = computed(() => count.value * 2);
console.log(double.value); // 2

• 对象写法（可写）

const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => { count.value = val - 1 }
});

plusOne.value = 5; // count.value 会变成 4

watch

• 基本写法

watch(count, (newVal, oldVal) => {
  console.log(`count changed from ${oldVal} to ${newVal}`);
});

• 选项 immediate：立即执行回调
• 选项 deep：深度监听对象属性变化

const state = reactive({ user: { name: 'Alice', age: 18 } });

watch(state, () => console.log('state changed'), { deep: true });

---

4️⃣ 性能和优化

• computed 会缓存计算结果，依赖未变不会重复计算 → 提高性能
• 普通函数每次调用都会重新计算，不缓存
• watch 不缓存结果，频繁变化会触发副作用 → 注意防抖 / 节流

---

5️⃣ 面试亮点总结

特性	computed	watch
核心功能	派生状态计算	监听变化执行副作用
缓存机制	有缓存，依赖不变不重算	无缓存，变化即触发
适用场景	模板渲染、复杂计算	API调用、DOM操作、异步处理
特殊能力	get/set对象写法支持双向绑定	immediate/deep选项控制监听行为

关键结论：

• 优先使用 computed 处理派生状态和模板渲染
• 复杂对象监听使用 watch 并配合 deep: true
• 异步操作必须使用 watch
• 计算属性避免副作用，监听器避免复杂计算

---

✅ 小贴士：面试加分点

• 面试官喜欢你用例子展示 computed 缓存效果：修改依赖后值变化，但依赖不变时访问不会触发重新计算
• watch 异步操作例子：监听表单输入，延迟触发 API 请求

---

如果你愿意，我可以接着整理 第 4 题，保持这个详细面试问答模式，让你每道题都能直接背。

是否现在直接出 第 4 题？