computed 与 methods 的核心差异在于是否自动追踪依赖和是否复用结果：computed 以属性形式读取、依赖不变时缓存结果；methods 以函数形式调用、每次执行不缓存。

Computed 的缓存机制和 methods 的普通函数调用，核心差异就两点：是否自动追踪依赖、是否复用上次结果。

调用方式不同，本质是访问逻辑不同

computed 是以属性形式被读取的，比如 {{ fullName }} —— 它看起来像一个变量，背后由 Vue 管理响应式更新；methods 是以函数形式被调用的，比如 {{ getFullName() }} —— 每次都触发执行，不加括号会直接显示函数体。

Vuejs

Vue.js 官方推荐通过 npm 进行安装，这是构建现代化前端项目最主流的方式。在终端中执行 npm install vue 即可获取最新稳定版，如需指定版本可添加 @版本号，例如 npm install vue@3.4.0。安装前请确保已配置 Node.js 环境（推荐 v18 及以上版本），并建议将 npm 镜像源切换至国内镜像以提升下载速度。对于大型项目，还可通过 npm create v

下载

依赖变化才重新计算，methods 每次都算

computed 内部会记录它访问了哪些响应式数据（比如 firstName 和 lastName），只要这些数据没变，哪怕模板里引用 10 次，也只执行一次函数；methods 不管数据变没变，只要模板里写了 10 次 getFullName()，就执行 10 次。

缓存让 computed 更适合复杂逻辑

• 如果计算涉及数组过滤、对象深遍历、字符串分词等耗时操作，用 computed 可避免重复开销
• methods 更适合需要实时响应用户动作的场景，比如点击按钮触发校验、提交表单
• computed 无法直接传参（需包装成方法返回函数），而 methods 天然支持参数传递

一个直观验证方式

在函数体里加 console.log：

• computed 中打印一次，说明缓存生效
• methods 中打印多次，说明每次调用都走函数体
• 改一下依赖的数据（比如输入框修改 firstName），再看日志——computed 会再次打印，methods 还是照常多打