一.定义
vue的一个option,用来计算缓存一些计算项。
let app = new Vue({
el:"#app",
data:{
firstName:"Kobe",
lastName:"Bryant"
},
computed: {
//计算属性
fullName(){
return this.firstName+" "+this.lastName
}
}
})
二、计算属性的set和get函数
tips:计算属性,fullName后面无(),methods方法示例调用的时候需要加()。
<div id="app">
{{fullName}}
</div>
-----------------------------------------
let app = new Vue({
el:"#app",
data:{
firstName:"Kobe",
lastName:"Bryant"
},
computed: {
/*计算属性
fullName(){
return this.firstName+" "+this.lastName
}
*/
fullName:{
//计算属性一般是没有set方法,一般称作读属性
set(newValue){
let names = newValue.split(" ")
this.firstName=names[0]
this.lastName=names[1]
},
get(){
return this.firstName+" "+this.lastName
}
}
}
})
当然源码中set和get不是这样的,但是就是这个道理。
三、computed和methods的对比
初学vue的都会发现computed和methods的写法都差不多,也并没有起到简化代码的作用,那么为啥会多一个computed的属性呢。
computed计算出来的属性会进行缓存,下次调用改属性就直接调用缓存的值。methods里面的方法重新调用同一个方法,调用一次执行一次。所以合理的使用计算属性,可以提高程序的性能。