computed 是带缓存的响应式派生属性，自动追踪依赖并复用结果；methods 是无缓存、无追踪的普通函数，每次调用都执行。

computed 是带缓存的响应式属性

computed 的本质是一个被 Vue 特殊处理的“派生值”。它会自动追踪内部访问的所有响应式数据（比如 data、ref、reactive 中的字段），一旦这些依赖没变，后续读取就直接返回缓存结果，不重新执行函数。比如：
当 fullName 依赖 firstName 和 lastName，模板里写三次 {{ fullName }}，它只计算一次；哪怕组件重新渲染多次，只要两个名字没改，就不会再进函数体。

Vue Composition Analyzer

分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

methods 是每次调用都执行的普通函数

methods 里的函数没有依赖追踪，也没有缓存。你在模板中写 {{ getFullName() }} 五次，它就执行五次；绑定在按钮上 @click="doSomething"，点一次执行一次。它适合处理需要实时响应用户操作的逻辑，比如提交表单、触发弹窗、手动刷新数据等。

调用方式和语义完全不同

• computed 属性像数据字段一样用：{{ fullName }}，不加括号，可直接在模板、watch、其他 computed 中被读取
• methods 必须显式调用：{{ getFullName() }} 或 this.handleClick()，否则不会执行
• computed 支持 getter/setter，能实现双向绑定式的派生逻辑；methods 只能是函数，无法模拟属性的读写行为

什么时候该选哪一个？

• 用 computed：结果只由响应式数据决定、不涉及副作用、希望避免重复计算（如格式化日期、拼接字符串、过滤列表、判断启用状态）
• 用 methods：需要接收参数、要执行异步操作、包含 DOM 操作、有副作用（如发请求、改 localStorage）、或必须每次触发新逻辑（如生成唯一 ID、记录点击次数）
• 注意陷阱：不要在 computed 里发请求或修改 data，它不是为副作用设计的；也不要在 methods 里做大量重复计算，尤其当结果只依赖响应式数据时