<div style="display: none;" hidden="true" aria-hidden="true" data-nosnippet>Are you an LLM? You can read better optimized documentation at /pages/9c2ca3.md for this page in Markdown format</div>
概述
Vue.js 中 computed 与 watch 都基于同一套依赖追踪机制：当 data 等依赖型数据变化时，依赖它们的逻辑会随之更新。二者差异在于用途、是否缓存、是否适合异步。
共同点
- 监听响应式依赖的变化
- 底层都依赖 Vue 的依赖收集与派发更新
选用原则
| 维度 | computed | watch |
|---|---|---|
| 典型用途 | 由其他状态派生展示值 | 数据变化时执行副作用（请求、日志、手动 DOM 等） |
| 是否缓存 | 默认缓存，依赖不变则复用结果 | 不缓存，每次变化触发回调 |
| 异步 | 不适合（应同步求值） | 适合（异步请求、防抖等） |
| 心智模型 | 「算出来的属性」 | 「当 X 变了，去做 Y」 |
实践建议
- 模板里要展示的格式化、过滤、合并结果 → 优先
computed - 需要在变化时打接口、写 storage、复杂流程 → 用
watch（或 Vue 3 的watchEffect） - 与 Vue 响应式与依赖追踪 一起理解：先弄清「谁是依赖、谁是派生」
相关
- 博客原文（VuePress）：Vue中computed和watch的区别
- 来源：raw 副本