在 Vue 中，computed 和 watch 有什么区别？它们各自适用于哪些场景？

回答思路

1. 【回答框架 1】computed 是声明式的计算属性，基于响应式依赖进行缓存，只有依赖变化时才重新计算。它适合从现有数据派生展示层数据的情况，例如根据列表计算总数、过滤后的数组等。
2. 【回答框架 2】watch 是命令式的观察回调，当侦听的数据源变化时执行自定义逻辑，不缓存结果。它适合需要执行异步操作、开销较大或需要控制触发时机的场景，例如搜索防抖、路由参数变化后的数据请求。
3. 【回答框架 3】关键差异在于使用方式：computed 用于模板中直接使用的派生值，而 watch 用于在数据变化时执行副作用。在开发中，优先考虑 computed，因为它更简洁且具备缓存优势。
4. 【回答框架 4】需要避免的误区是：watch 不能直接实现依赖缓存，若只是派生值，用 watch 会造成代码冗余且性能不佳；而 computed 内部不能有副作用，如异步请求或修改其他状态，应放在 watch 或事件处理中。
5. 【关键点 1】computed 基于响应式依赖缓存，依赖不变则不重新计算。
6. 【关键点 2】watch 侦听数据变化并触发回调，不缓存结果。
7. 【关键点 3】computed 适合派生状态，watch 适合副作用或异步操作。
8. 【关键点 4】优先使用 computed，watch 用于无法用派生表达的场景。
9. 【易错点 1】在 computed 中执行异步操作或修改其他状态，违反其纯函数特性。
10. 【易错点 2】将 watch 用于简单的派生值，导致代码冗余且无缓存。
11. 【易错点 3】忽略 watch 的深度监听和 immediate 选项，导致漏监听或首次不执行。