计算属性适合依赖响应式数据且需缓存的场景，普通方法适合需传参、含副作用或每次调用都需重执行的操作；误用会导致重复计算、性能下降或视图异常。
计算属性更适合依赖响应式数据、需要缓存结果的场景；普通方法适合每次调用都需重新执行、逻辑独立或含副作用的操作。选错会导致重复计算、性能下降甚至视图异常。
计算属性：用在“值会变，但变之前不重算”的地方
计算属性基于响应式依赖自动缓存，只要依赖没变，多次访问直接返回缓存值，不重新执行函数。适合模板中频繁读取、且结果只随 data 或 props 变化的场景。
- 比如：{{ fullName }} 由 firstName 和 lastName 拼接而成，模板里用了 5 次，计算属性只执行 1 次
- 依赖的数据（如 user.profile）被修改时，才会重新求值
- 不能传参，也不适合发请求、改状态等副作用操作
普通方法：用在“每次都得算，或者要控制时机”的地方
每次调用都会执行函数体，无缓存。适合需要动态参数、触发副作用、或仅在用户交互时才运行的逻辑。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 比如：@click="handleSearch(keyword)"，keyword 每次不同，必须用方法
- 内部调用 this.$http.get() 或 this.loading = true，这类操作只能放方法里
- 模板中误写成 {{ formatTime(item.time) }}（且 item 列表很长），会引发严重卡顿——应改用计算属性预处理，或配合 key/v-memo 优化渲染
高频调用卡顿？先看是不是误用了方法
常见卡顿根源不是 Vue 性能差，而是把本该用计算属性的逻辑写成了方法，并在模板中反复调用。
- 检查模板：是否存在 {{ expensiveMethod() }} 出现在 v-for 内部或多个插值中
- 替换方案：提取为计算属性，或使用 v-memo（Vue 3.2+）对子树做条件缓存
- 进阶优化：复杂计算可结合 memoize 工具函数（如 lodash.memoize）手动缓存，但要注意响应式依赖无法自动追踪
不确定时，按这个流程判断
- 是否只读取响应式数据，不修改、不发请求？→ 优先计算属性
- 是否需要传参？→ 必须用方法（或封装为带参数的 getter + computed 组合式写法）
- 是否在事件回调中执行？→ 用方法
- 是否在模板中被多次访问？→ 计算属性更安全
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
