计算属性是Vue框架中的一个核心特性,它为开发者提供了一种高效的数据处理方式,特别是在处理复杂的逻辑和依赖关系时,能够显著提高应用的性能和可维护性。
基本概念
Computed 是基于它们的依赖进行缓存的。只有当依赖发生变化时,它们才会重新计算。这与直接在模板中使用方法(methods)来计算值不同,因为方法会在每次调用时都执行函数。
特性
1.依赖性:计算属性会自动追踪其依赖的数据属性。当这些依赖项发生变化时,计算属性会重新计算其值。
2.缓存性:Vue知道计算属性依赖于哪些数据,并且只有当这些依赖项发生了改变才会重新计算。如果没有变化,则直接从缓存中返回之前的计算结果,这大大提高了性能。
3.声明式绑定:计算属性的结果可以绑定到模板中,就像绑定普通的数据属性一样,使得代码更加清晰和易于维护。
用法
计算属性可以在Vue实例的computed
选项中定义,通常包含一个getter函数(可选地,还可以包含一个setter函数来改变依赖项)。
基本语法
<template>
<div id="app">
<!-- 触发changName函数修改name的值 -->
<button @click="changName">更改Name</button>
<!-- 计算属性的结果当作普通的数据属性使用 -->
{{fullName}}
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
// 数据属性
firstName: 'John',
lastName: 'Doe'
}
},
// 计算属性
computed: {
fullName: {
get() {
// 计算并返回全名(计算属性的依赖项,当this.firstName/this.lastName发生改变时触发计算属性)
return this.firstName + '' + this.lastName;
},
set(newValue) {
// 解析并设置firstName和lastName
const namesss = newValue.split('');
if (names.length >= 2) {
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
},
methods: {
changName() {
//触发执行此函数,修改firstName 和 lastName 的值触发与之绑定的fullName计算属性执行
this.firstName = "Tome";
this.lastName = 'coco';
}
}
}
</script>
与methods的区别
- methods:每当触发重新渲染时,调用方法会导致函数再次执行。
- computed:只有当依赖的数据变化时,计算属性才会重新计算,结果会被缓存起来,直到下一次依赖变更。
应用场景
- 当你需要根据现有数据属性生成新值,并且这个值会频繁用于模板中展示时。
- 当计算逻辑较为复杂,不希望每次模板渲染都执行相同的计算逻辑时。
- 当需要根据某些条件控制数据的只读或可写状态时,可以利用setter功能。