Appearance
computed 与 watch：派生状态、脏标记与副作用调度
主题定位
两者都建立在 ReactiveEffect 上，但一个解决派生值，一个解决副作用。
- 两者都建立在 ReactiveEffect 上，但一个解决派生值，一个解决副作用
- computed 和 watch 都建立在 ReactiveEffect 上，但解决的是两类完全不同的问题
- computed 负责可缓存的派生状态，watch 负责观察源变化并驱动副作用
- 把 computed 当监听器使用会让依赖关系和副作用边界同时变脏
computed 与 watch 的职责拆分
computed
computed 先看职责边界，再看生命周期、数据形态和与其他对象的协作关系。 computed 的差异最终会体现在 响应式、调度器、组件边界 这几个维度。 computed 讲清适用边界、失效条件和代价结构，结论才有技术含量。
watch
watch 先看职责边界，再看生命周期、数据形态和与其他对象的协作关系。 watch 的差异最终会体现在 响应式、调度器、组件边界 这几个维度。 watch 讲清适用边界、失效条件和代价结构，结论才有技术含量。
差异对照与常见误用
- 两者都建立在 ReactiveEffect 上，但一个解决派生值，一个解决副作用
- computed 和 watch 都建立在 ReactiveEffect 上，但解决的是两类完全不同的问题
- computed 负责可缓存的派生状态，watch 负责观察源变化并驱动副作用
- 把 computed 当监听器使用会让依赖关系和副作用边界同时变脏
- computed 内部持有 lazy effect 和 dirty 标记，依赖变化时先置脏，下一次读取时再重新求值
- watch 会对 source 建立 effect，变化后调度回调执行；watchEffect 则把依赖收集和副作用执行合在一起
Vue 工程建议
- 两者都建立在 ReactiveEffect 上，但一个解决派生值，一个解决副作用
- computed 和 watch 都建立在 ReactiveEffect 上，但解决的是两类完全不同的问题
- computed 负责可缓存的派生状态，watch 负责观察源变化并驱动副作用
- 把 computed 当监听器使用会让依赖关系和副作用边界同时变脏
- computed 内部持有 lazy effect 和 dirty 标记，依赖变化时先置脏，下一次读取时再重新求值
问答设计及延伸
标准回答
回答 computed 与 watch：派生状态、脏标记与副作用调度 时，先定义 computed、watch 各自解决的问题，再比较它们在 响应式、调度器、组件边界 上的差异，最后给出选型边界和工程代价。
追问拆解
- computed 与 watch：派生状态、脏标记与副作用调度 与“Vue 调度器：job queue、批量更新与 flush 顺序”的边界关系
- computed 与 watch：派生状态、脏标记与副作用调度 与“watch、watchEffect 与清理机制：竞态取消与 effect 生命周期”的边界关系
- computed 与 watch：派生状态、脏标记与副作用调度 与“生命周期与 nextTick：渲染阶段、DOM 可见性与副作用时机”的边界关系
- 跨标签页、跨域、多端协作场景下的结论变化
- 维护成本上升后的优先级调整
容易失分的点
- 只给“哪个好”的结论，不先拆对象
- 只报 API 或术语，不解释运行时行为和代价
- 缺少真实场景，导致结论过度绝对
项目映射
- 结合真实系统说明 computed 到 watch 分别落在哪段链路
- 补充未选方案的放弃原因和约束差异
- 补充线上问题、治理动作和验证结果