一、计算属性的基本用法
在使用计算属性之前,需要先了解计算属性的使用场景,根据 “为什么要使用计算属性?” 的思路,来正确认识计算属性的用法和好处
项目场景
页面中有三个 input 标签,前两个分别是 姓 和 名,最后一个需要根据前两个 input 标签的输入计算产生,显示效果如:Kobe Bryant(姓名之间用空格隔开)
<div id="demo">
姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
<!--fullName1 是根据 fistName 和 lastName 计算产生-->
姓名1: <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
</div>
先给 firstName 和 lastName 设置两个初始值 Kobe 和 Bryant
const vm = new Vue({
el: '#demo',
data: {
firstName: 'Kobe',
lastName: 'Bryant'
}
})
fullName1 为什么需要用到计算属性呢?因为 fullName1 的属性值需要根据 data 中的 firstName 和 lastName 这两个属性来计算得出,所以,这就是计算属性的应用场景:根据其他 data 属性数据 来计算得出属性值
const vm = new Vue({
el: '#demo',
data: {
firstName: 'Kobe',
lastName: 'Bryant'
},
computed: {
fullName1(){ // fullName1是计算属性的一个方法,方法的返回值作为属性值
return this.firstName + ' ' + this.lastName
}
}
})
fullName1 是一个回调函数,它在初始化数据和其他 data 属性数据发生改变时自动调用,将返回值 (根据相关的其它属性数据 )作为属性值。这时,如果你改变姓和名的数据,最后的姓名数据也会随之改变。以上是计算属性的基本用法。
二、计算属性中的缓存
缓存的概念
计算属性中的缓存是指,在页面中多次获取计算属性的属性值,如果相关的 data 属性数据没有发生改变,则会调取缓存中的数据,从而提高性能,这也是计算属性和 methods 属性的不同也是优势之处
代码如下(示例):
<p>{{fullName1}}</p>
<p>{{fullName1}}</p>
<p>{{fullName1}}</p>
仍是上面的例子,不同的是在 p 标签中多次获取 fullName1 的值,那么 fullName1 对应的方法只会在初始化数据时调用一次,之后每次都会获取缓存中的 fullName1 的值
三、计算属性中的 getter 和 setter
实际上,计算属性中的所有属性都有一个 set 方法和一个 get 方法,俗称 setter 和 getter,通常使用计算属性时,都是调用属性的 get 方法。
const vm = new Vue({
el: '#demo',
data: {
firstName: 'Kobe',
lastName: 'Bryant'
},
computed: {
fullName1: {
get(){
return this.firstName + ' ' + this.lastName
},
如上面的代码中,fullName1 属性的 get 方法就是用于获取属性值时调用,将返回值 (根据相关的其它属性数据) 作为属性值,但是 set 方法就不太一样了。调用 fullName1 属性的get 方法,fullName1 的值只能根据其依赖的相关数据改变而改变,但是它本身没有 set 方法的话,改变它的值是会报如下错误的。
vue.js:491 [Vue warn]: Computed property "fullName1" was assigned to but it has no setter.
(found in <Anonymous>)
也就是说,如果你没有设置 set 方法,那么不能擅自改变计算属性的属性值。那么,set 方法的用处是什么呢?set 方法可以用于监视当前属性值变化 , 当属性值发生了改变时自动调用,同步更新相关的其它属性值。比如,fullName1 的值改变的时候,可以同步更新 firstName 和 lastName
computed: {
fullName1: {
get(){
return this.firstName + ' ' + this.lastName
},
set(value){
const names = value.split(' ')
this.firstName = names[0]
this.lastName = names[1]
}
}
}
set 方法还有一个参数 value,它是 fullName1 改变后的新值,可以在 set 方法中操作该值。
总结
计算属性是Vue中一个很好用的配置选项,但是要在充分了解它的应用场景后,才能更好地运用它,以上就是关于计算属性的一些个人思考,如有疏漏,欢迎指正。peace ~~