#Computed vs Watch

到底该用哪个？

#区别

#Computed

• 用途：根据已有数据算出新数据
• 缓存：有缓存。依赖没变，直接返回上次结果
• 同步：必须 return 一个值

#Watch

• 用途：数据变化时执行副作用（请求接口、跳转页面）
• 缓存：无缓存。每次变化都执行
• 异步：支持异步操作

#Computed 缓存原理

脏值检测：每个 computed 有一个 dirty 标记。

1. 依赖变化 → 设置 dirty = true
2. 视图读取 → 发现 dirty = true → 重新计算 → 设置 dirty = false
3. 再次读取 → dirty = false → 直接返回缓存

#watchEffect

Vue 3 新增。

• 自动收集依赖：不用写监听谁，直接写逻辑
• 立即执行：初始化时跑一次（为了收集依赖）

watchEffect(() => {
  console.log(count.value); // 自动监听 count
});

#怎么选？

能用 Computed 解决的，尽量不用 Watch。

• 要"算出一个值"→ Computed
• 要"数据变了做件事"→ Watch

#总结