计算属性适合依赖响应式数据且需缓存的场景，普通方法适合需传参、含副作用或每次调用都需重执行的操作；误用会导致重复计算、性能下降或视图异常。

计算属性更适合依赖响应式数据、需要缓存结果的场景；普通方法适合每次调用都需重新执行、逻辑独立或含副作用的操作。选错会导致重复计算、性能下降甚至视图异常。

计算属性：用在“值会变，但变之前不重算”的地方

计算属性基于响应式依赖自动缓存，只要依赖没变，多次访问直接返回缓存值，不重新执行函数。适合模板中频繁读取、且结果只随 data 或 props 变化的场景。

• 比如：{{ fullName }} 由 firstName 和 lastName 拼接而成，模板里用了 5 次，计算属性只执行 1 次
• 依赖的数据（如 user.profile）被修改时，才会重新求值
• 不能传参，也不适合发请求、改状态等副作用操作

普通方法：用在“每次都得算，或者要控制时机”的地方

每次调用都会执行函数体，无缓存。适合需要动态参数、触发副作用、或仅在用户交互时才运行的逻辑。

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

• 比如：@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 组合式写法）
• 是否在事件回调中执行？→ 用方法
• 是否在模板中被多次访问？→ 计算属性更安全