什么是计算属性
一般我们可以在模版中直接通过插值语法显示一些data中的数据。但是在某些情况下，需要对数据进行一些转化后再显示，或者将多个数据结合起来进行显示，如firstName和lastName两个变量，需要显示完整的名称，但是如果多个地方都需要显示完整的名称，我们就需要写多个firstName和lastName。那么我们就可以将起那面的代码换成计算属性。
计算属性的简单操作
<div id="app">
<!--Mustache写法-->
<h2>{{firstName}} {{lastName}}</h2>
<!--计算属性-->
<h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
firstName: "kobe",
lastName: "bryant"
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
计算属性的复杂操作
<div id="app">
<h2>总价格：{{tolPrice}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
books: [
{id: 110,name: 'Unix入门',price: 124},
{id: 111,name: 'Java入门',price: 221},
{id: 112,name: 'Vue入门',price: 167},
{id: 113,name: '计算机入门',price: 335}
]
},
computed:{
tolPrice: function () {
// return this.books[0].price + this.books[1].price + this.books[2].price + this.books[3].price
let result = 0
for(let i=0;i < this.books.length;i++){
result += this.books[i].price
}
return result
}
}
})
</script>
计算属性的setter和getter
<div id="app">
<h2>{{fullName}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊！",
firstName: "Allen",
lastName: "Iverson"
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName;
}
}
})
</script>
上面的代码中有的人会有这样的问题，fullName是个函数，为什么引用时没有加()呢，下面我们来看看计算属性内部到底是什么样的
computed: {
// fullName: function () {
// return this.firstName + ' ' + this.lastName;
// }
fullName: {
set: function (newValue) {
console.log("-------",newValue);
const name = newValue.split(" ");
this.firstName = name[0];
this.lastName = name[1];
},
get: function () {
return this.firstName + ' ' + this.lastName;
}
}
}
上面便是计算属性未简化的代码，可以看出fullName就是个属性，其内部有set和get方法。又因为计算属性一般是没有set方法的，是个只读属性，所以就可以简写成上面注释中的代码。
计算属性的缓存
现在凭借名字有三种方法
data: {
firstName: "Allen",
lastName: "Iverson"
},
- 直接拼接
<h2>{{firstName}} {{lastName}}</h2>
- methods方法
<h2>{{getFullName()}}</h2>
methods:{
getFullName: function () {
return this.firstName + " " + this.lastName
}
}
- computed计算属性
<h2>{{fullName}}</h2>
computed: {
fullName: function () {
return this.firstName + " " + this.lastName
}
}
