计算属性（computed）用于同步派生状态并缓存结果，适合模板频繁读取的纯计算；监听器（watch）用于执行异步或高开销副作用，支持深度监听与防抖；watchEffect则自动追踪依赖、简化响应式副作用。

计算属性（computed）和监听器（watch）在 Vue 中都用于响应数据变化，但它们的定位、执行时机和适用场景有本质区别。复杂业务逻辑下选错会导致性能浪费、状态不一致或调试困难——关键不在“哪个更好”，而在“谁更适合当前任务”。

用 computed 处理派生状态与同步计算

当需要基于响应式数据同步推导出新值，且该值会被模板频繁读取或作为其他计算属性的依赖时，computed 是首选。它具备缓存机制，仅在依赖变更时重新求值，避免重复计算。

• 适合场景：表格筛选结果、表单校验状态（如“提交按钮是否禁用”）、格式化显示（金额千分位、日期本地化）
• 注意点：不能执行异步操作；不能直接修改响应式数据（应通过方法或事件触发）；避免在 computed 中做副作用（如发请求、改 DOM）
• 示例：用户输入搜索关键词后，实时过滤商品列表——过滤逻辑纯同步、依赖明确、需多次渲染使用，用 computed 最自然

用 watch 处理异步或开销大的响应式副作用

当数据变化需要触发异步操作、批量更新、外部系统调用或代价较高的逻辑时，watch 更合适。它不缓存，每次变化都执行回调，且支持 immediate、deep 和防抖封装。

• 适合场景：搜索关键词节流请求 API、表单字段变更后保存草稿、路由参数变化时重置子组件状态、监听对象深层属性（配合 deep: true）
• 注意点：watch 默认不深度监听对象内部变化（需显式 deep: true）；避免在 watch 回调中直接修改被监听的数据（可能引发循环）；推荐用 watch 的返回值清理副作用（如取消未完成的请求）
• 示例：用户编辑富文本内容，每 500ms 后自动保存到 localStorage——这是典型的“变化 → 延迟执行 → 副作用”，必须用 watch（或 watchEffect + clearTimeout）

警惕 computed 的“伪响应”陷阱

computed 的依赖追踪是静态的，只收集模板或 JS 中实际读取过的响应式属性。如果逻辑里存在条件分支、未执行的代码块或动态 key 访问，可能导致依赖丢失，值不再更新。

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• 常见问题：在 computed 中用 if 判断某个字段是否存在，但该字段初始为 undefined，后续才赋值——若判断分支未命中，Vue 就不会追踪它
• 解决方案：确保所有可能影响结果的响应式字段都在函数体中被显式访问；必要时用 toRefs 或 markRaw 避免意外响应化；复杂逻辑可拆分为多个细粒度 computed
• 调试技巧：开启 Vue Devtools 的 “Reactivity” 面板，查看 computed 的依赖列表是否完整

watchEffect：更简洁的响应式副作用方案

Vue 3 推出的 watchEffect 是 watch 的轻量替代，自动收集依赖，无需手动指定监听源。适用于“只要某些响应式值一变，就立刻运行一段逻辑”的场景，代码更紧凑。

• 优势：写法更接近“观察即执行”，减少样板代码；天然支持依赖自动追踪；适合组合式 API 中的局部副作用管理
• 局限：无法获取旧值；不支持 deep / immediate 等选项（需额外封装）；不适合需精确控制触发时机的复杂流程
• 示例：监听用户地理位置权限状态，一旦变为 'granted' 就立即调用 getCurrentPosition()——用 watchEffect 可一行声明，比 watch 更直观

不复杂但容易忽略：多数复杂逻辑不是非此即彼，而是分层协作——computed 负责稳定输出中间状态，watch 或 watchEffect 负责把这些状态转化为动作。把“算什么”和“做什么”分开，结构才清晰、可测、易维护。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！