计算属性比普通方法更高效，因其具备响应式缓存机制——依赖数据未变时直接返回缓存结果，而methods每次调用都重新执行；computed适用于依赖响应式数据的同步派生计算，methods适用于需传参、含副作用或必须每次都执行的场景。
计算属性比普通方法更高效，核心在于缓存机制——只要依赖的数据没变，多次访问 computed 属性不会重复执行函数，而 methods 每次调用都会重新计算。
计算属性具备响应式缓存
computed 的值会基于其响应式依赖（如 data 中的变量）进行追踪。当依赖未变化时，Vue 直接返回上一次缓存的结果，跳过函数体执行。
例如：
data() {<br> return {<br> firstName: 'John',<br> lastName: 'Doe'<br> }<br>},<br>computed: {<br> fullName() {<br> console.log('fullName 计算执行了')<br> return this.firstName + ' ' + this.lastName<br> }<br>},<br>methods: {<br> getFullName() {<br> console.log('getFullName 调用执行了')<br> return this.firstName + ' ' + this.lastName<br> }<br>}
在模板中连续写 {{ fullName }} {{ fullName }} {{ fullName }}，控制台只输出一次“计算执行了”；而 {{ getFullName() }} {{ getFullName() }} {{ getFullName() }} 会输出三次“调用执行了”。
立即学习“前端免费学习笔记（深入）”；
methods 每次触发都重新求值
methods 是纯函数调用，不跟踪依赖，也不做缓存。即使结果完全相同，只要模板里写了多次、或在 watch / 生命周期中反复调用，就会重复执行。
- 适合处理事件回调（如
@click="handleSubmit"），因为需要每次响应用户操作 - 适合含副作用的操作（如发送请求、修改 DOM、触发 alert）
- 不适合用于模板中频繁读取的派生状态，否则造成不必要开销
什么时候该用 computed，什么时候用 methods
判断依据不是“能不能用”，而是“要不要缓存”和“是否依赖响应式数据”。
- 用 computed：依赖 data / props 数据、仅作同步计算、需在模板中多次使用、结果需保持响应式更新（比如过滤列表、格式化日期、拼接字符串）
- 用 methods：需要参数传入（computed 不支持传参）、涉及异步或副作用、必须确保每次都执行（如表单验证触发、按钮点击逻辑）
- 补充方案：若 computed 需要参数，可结合返回函数的方式（如
getFilteredList(type) { return () => list.filter(...)}），但注意这已失去缓存优势，此时应权衡是否改用 methods
性能差异在真实场景中是否明显
简单拼接或小数组过滤几乎无感，但当计算逻辑复杂（如深克隆、大量循环、正则匹配）或高频渲染（v-for 渲染上百项、每项都调用该逻辑）时，methods 的重复执行会显著拖慢响应速度。
Vue Devtools 的 performance tab 可直观看到 methods 调用频次远高于 computed，尤其在滚动、输入、动画过程中。
不复杂但容易忽略。
