在 Vue 中，watch 监听器和 computed 计算属性分别适用于哪些典型场景？从依赖追踪、缓存机制、异步处理以及代码执行时机等方面分析两者在设计上的核心差异，并说明何时应优先选择其中一种而不是另一种。
考察说明
考查对 Vue 响应式系统中 watch 与 computed 各自职责和适用场景的理解，能否准确表述其本质差异。
回答思路
- 【回答框架 1】computed 是派生状态，基于响应式依赖自动计算并缓存，依赖不变时不会重新求值；watch 是侦听副作用，在指定数据变化时执行回调，没有缓存。
- 【回答框架 2】computed 内部禁止异步操作，需要返回同步值，适用于模板中使用的衍生数据；watch 则适合处理异步任务、开销较大的操作或需要监听多个数据变化后触发的逻辑，如搜索请求、路由切换等。
- 【回答框架 3】使用场景上，模板中展示由现有数据组合而成的值应首选 computed，保持声明式简洁；需要在数据变化时执行命令式逻辑或调用外部接口时选用 watch。
- 【回答框架 4】性能方面，computed 因缓存能避免重复计算，而 watch 每次变化都会触发回调，可能频繁执行，需注意性能影响。
- 【回答框架 5】两者都可监听多个数据源，computed 通过依赖自动追踪，watch 可通过数组或路径字符串监听；但 computed 不允许在回调中修改依赖自身的值，而 watch 则可以，但需小心避免无限循环。
- 【关键点 1】computed 基于响应式依赖缓存，watch 不缓存，每次变化都执行回调。
- 【关键点 2】computed 用于派生同步状态，watch 用于执行异步或复杂副作用。
- 【关键点 3】模板中优先使用 computed，需要监听变化触发逻辑时使用 watch。
- 【易错点 1】在 computed 中执行异步操作或修改依赖值可能导致无法预期的行为。
- 【易错点 2】watch 中修改被监听的数据可能造成循环调用，需设置条件或使用 deep 监听时注意性能。
- 【易错点 3】不要混淆两者，computed 不能替代 watch 处理异步逻辑，watch 也不能替代 computed 提供高效缓存。