Vue开发中计算属性与方法调用之间的区别与联系
文章目录
- 一 概述
- 二 核心区别
- 三 联系
- 四 使用原则
一 概述
在 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。如果你的业务实现不需要有缓存，计算属性可以使用方法来代替。
优先使用计算属性 ：
当需要根据响应式数据动态生成值，且该值会被多次使用或计算成本较高时。
使用方法 ：
当逻辑不依赖响应式数据，或需要显式触发（如按钮点击事件）。