computed 是带缓存的响应式派生属性，自动追踪依赖并复用结果；methods 是无缓存、无追踪的普通函数，每次调用都执行。
computed 是带缓存的响应式属性
computed 的本质是一个被 Vue 特殊处理的“派生值”。它会自动追踪内部访问的所有响应式数据（比如 data、ref、reactive 中的字段），一旦这些依赖没变，后续读取就直接返回缓存结果，不重新执行函数。比如：
当 fullName 依赖 firstName 和 lastName，模板里写三次 {{ fullName }}，它只计算一次；哪怕组件重新渲染多次，只要两个名字没改，就不会再进函数体。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
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 里做大量重复计算，尤其当结果只依赖响应式数据时
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
