文章目录
- 一 概述
- 二 核心区别
- 三 联系
- 四 使用原则
一 概述
在 Vue 中，计算属性（computed） 和 方法（methods） 都可以用于处理数据逻辑，但它们的核心区别在于 缓存机制 和 触发方式 。
计算属性示例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo</title>
</head><body><!-- 使用computed --><div id="app"><button v-on:click="a++">a+1</button><button v-on:click="b++">b+1</button><p>number + a = {{add1}}</p><p>number + b = {{add2}}</p></div><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script>const vm = Vue.createApp({data() {return {a: 0,b: 0,number: 30};},computed: {add1: function() {console.log("This is add1 computed function: " +this.a);return this.a + this.number;},add2: function() {console.log("This is add2 computed function: " +this.b);return this.b + this.number;}}}).mount("#app");</script>
</body></html>
页面加载时，控制台打印结果如下：
This is add1 computed function: 0
This is add2 computed function: 0
连续点击2次a+1按钮，再点击一次b+1按钮，控制台运行结果如下：
二 核心区别
| 特性 | 计算属性（computed） | 方法（methods） |
|---|---|---|
| 缓存机制 | 基于依赖的响应式数据自动缓存，依赖不变时直接返回缓存值。 | 无缓存，每次组件渲染时都会执行。 |
| 触发时机 | 仅当依赖的响应式数据变更时重新计算。 | 每次渲染或调用时都会执行。 |
| 调用方式 | 在模板中直接当作属性使用（无需调用）。 计算属性的调用不能使用括号，例如 add1、add2。 | 必须显式调用，需要加上括号，例如 add1()、add2()。 |
| 适用场景 | 复杂逻辑、依赖其他数据且需缓存的场景（如过滤、计算衍生值）。 | 事件处理、不依赖缓存的动态操作（如提交表单）。 |
而
三 联系
共同点
- 都可以处理数据逻辑，返回衍生值。
- 都能访问组件实例的 data、props 等属性。
互补场景
- 计算属性适合 高开销、依赖明确 的逻辑（如过滤列表、复杂计算）。
- 方法适合事件驱动或无需缓存的操作（如表单提交、动态参数生成）。
四 使用原则
计算属性相较于方法更加优化，但并不是什么情况下都可以使用计算属性，在触发事件时还是使用对应的方法。计算属性一般在数据量比较大、比较耗时的情况下使用(例如搜索)，只有虚拟DOM 与真实 DOM 不同的情况下才会执行 computed。如果你的业务实现不需要有缓存，计算属性可以使用方法来代替。
优先使用计算属性 ：
当需要根据响应式数据动态生成值，且该值会被多次使用或计算成本较高时。
使用方法 ：
当逻辑不依赖响应式数据，或需要显式触发（如按钮点击事件）。
