#Computed vs Watch

#1. 面试题

Q: computed 和 watch 的区别是什么？computed 为什么有缓存？应用场景分别是什么？

#2. 核心解答

#(1) 区别

• Computed (计算属性)：
  • 用途：用于衍生数据（依赖 A 算出 B）。
  • 缓存：有缓存。只有依赖的响应式数据变化时，才会重新计算。否则直接返回上次结果。
  • 同步：不支持异步操作，必须 return 一个值。
• Watch (侦听器)：
  • 用途：用于副作用（数据变化时执行操作，如请求 API）。
  • 缓存：无缓存。每次变化都执行。
  • 异步：支持异步操作。

#(2) Computed 缓存原理

Vue 内部通过脏值检测 (Dirty Checking) 实现。 每个 computed 都有一个 dirty 标记。

1. 依赖变化 -> 通知 computed -> 设置 dirty = true -> 触发视图更新。
2. 视图读取 computed ->发现 dirty 是 true -> 重新计算 -> 设置 dirty = false。
3. 再次读取 -> dirty 是 false -> 直接返回缓存值。

#(3) watchEffect

Vue 3 新增 API。

• 自动依赖收集：不需要手动写监测源 watch(source, cb)，直接写逻辑 watchEffect(() => console.log(count.value))。
• 立即执行：初始化时会立刻执行一次（为了收集依赖）。

#3. 总结

• Computed: 有缓存，用于计算值。
• Watch: 无缓存，用于执行动作（副作用）。
• 原则: 能用 Computed 解决的，尽量不用 Watch。