先来看一个例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算属性</title>
</head>
<body>
<div id="app">
<div>(计算属性)总分数为 :{{totalScoresC}}</div>
<div>(方法)总分数为 :{{totalScores()}}</div>
<div>(计算属性)总分数为 :{{totalScoresC}}</div>
<div>(方法)总分数为 :{{totalScores()}}</div>
</div>
</body>
<script src="../js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
students: [
{id: 1, scores: 56},
{id: 2, scores: 86},
{id: 3, scores: 70},
{id: 4, scores: 90},
{id: 5, scores: 60},
{id: 6, scores: 78},
{id: 7, scores: 87},
{id: 8, scores: 76}
]
},
methods: {
totalScores(){
console.log("通过方法获取值")
return this.students.reduce((totalScores, curr) => {
return totalScores + curr.scores
},0)
}
},
computed: {
totalScoresC(){
console.log("通过计算属性获取")
return this.students.reduce((totalScores, curr) => {
return totalScores + curr.scores
},0)
}
}
});
</script>
</html>
输出的结果为:
(计算属性)总分数为 :603
(方法)总分数为 :603
(计算属性)总分数为 :603
(方法)总分数为 :603
从结果可以看出,输出的结果是一样的,这里将结果显示两遍是为了验证他们取值的时候,是否都是通过去调用一遍方法获取,还是通过属性存着然后获取的,然后我们看控制台:
说明通过方法获取值的时候,每获取一次,他就会去调用方法,然后取出返回值,进行显示。
而通过计算属性取值的时候,他只调用一次,第二次获取的时候,如果其中的相关数据没有改变,那么他不再次调用方法,是比较节约性能的,