面试题：computed 和 watch 区别？computed 为什么能缓存？

常见问法

• 「什么场景用 computed，什么用 watch？」
• 「computed 是懒执行吗？」
• 「watch 的 deep、immediate 干什么用？」

本质区别

	computed	watch
角色	派生状态：由其它响应式数据计算而来	副作用：数据变时执行回调（打接口、改 DOM、写日志）
返回值	有（当作属性用）	无（靠回调做事）
缓存	默认缓存，依赖不变不重新计算	无「结果缓存」概念
写法	应有纯函数语义（不应产生外部副作用）	专门做异步与副作用

computed 缓存原理（Vue3 心智模型）

computed 内部维护：

1. 依赖追踪：执行 getter 时收集用到的 reactive 属性。
2. dirty 标记：依赖变更时标记为「脏」，下次读取 computed 才重新求值。
3. 若依赖未变，直接返回上次的缓存值。

因此：只有被读取且变脏才会重算 → 懒计算 + 缓存。

watch 要点

• deep: true：深度遍历对象子属性变化也触发（注意性能）。
• immediate: true：创建时立即执行一次回调。
• flush: 'post'（Vue3）：DOM 更新之后再跑回调，适合读更新后的 DOM。
• watchEffect：自动追踪依赖，立即执行一次，适合「用到啥就监听啥」的简单副作用。

口述题标准答法

「computed 适合模板里展示的派生数据，避免模板里写复杂逻辑；watch 适合数据一变就要干别的事，比如请求、联动表单。computed 有缓存，依赖不变不重复算。」