爲什麼使用計算屬性
我們知道，在模板中可以直接通過插值語法顯示一些data中的數據 。但在某一些情況時，我們可能需要丟數據進行一些轉化後再顯示，或者是將多個數據結合起來進行顯示
例如：假如有兩個變量firstName和lastName,需求是多次顯示完整的名字，如果還是用插值法的話，我們就需要寫多個 {{firstName}}{{lastName}}，用起來就很麻煩，代碼看上去也很低級 。所以我們就需要使用到實例中的計算屬性computed
如何使用計算屬性
注意：
（1）使用計算屬性時不用像方法那樣加小括號，它就相當於是一個屬性，直接拿來用就可以
（2）計算屬性取名最好不要是動詞（雖然動詞也不會有影響）
（3）下面我會談及到計算屬性和方法的區別
<body>
<div id="app" >
//小鬍子方法
<h2>{{firstName + ' ' + lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
//使用methods,加上小括號
<h2>{{getfullName()}}</h2>
//使用計算屬性，計算屬性可以不加小括號，因爲是一個屬性
<h2>{{fullName}}</h2>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data: {
firstName:'張',
lastName:'三'
},
methods:{
getfullName() {
return this.firstName + ' ' + this.lastName;
}
},
//計算屬性取名最好不要加動詞
computed:{
fullName:function() {
return this.firstName + ' ' + this.lastName;
}
}
})
</script>
計算屬性的setter和getter
注意：
（1）一般情況下沒有set方法，只需要實現get方法（只讀屬性）
（2）只有get方法的可以簡寫
（3）set方法會有一個參數，這個參數就是傳入的新的值
<body>
<div id="app" >
<h2>{{fullName}}</h2>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data: {
firstName:'張',
lastName:'三'
},
computed:{
fullName: {
//一般情況下沒有set方法，只需要實現get方法（只讀屬性）
set:function(newValue) {
const name = newValue.split(' ');
this.firstName = name[0];
this.lastName = name[1];
},
get:function() {
return this.firstName + ' ' + this.lastName;
}
}
//實質就是get方法
// fullName: function() {
// return this.firstName + ' ' + this.lastName;
// }
}
})
</script>
</body>
methods和computed區別
在上面我們看到methods和computed都可以用來實現需求，那麼這兩個究竟有什麼不同呢？
在以下例子中分別執行methods和computed各兩次，請看下圖控制檯打印結果。我們發現，methods執行了兩次，而computed只執行了一次。
區別：
計算屬性會進行緩存，如果多次使用，計算屬性只會調用一次。只要其中的變量不改變，就不需要再一次執行，能夠更好地提高性能
<body>
<div id="app" >
<h2>{{getfullName()}}</h2>
<h2>{{getfullName()}}</h2>
<h2>{{fullName}}</h2>
<h2>{{fullName}}</h2>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data: {
firstName:'張',
lastName:'三'
},
methods:{
getfullName() {
console.log("我是方法");
return this.firstName + ' ' + this.lastName;
}
},
computed:{
fullName: function() {
console.log("我是計算屬性");
return this.firstName + ' ' + this.lastName;
}
}
})
</script>
</body>
小案例：用計算屬性算總價
方法一
<body>
<div id="app" >
<h2>{{totalPrice}}</h2>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data: {
books:[
{ id: 1, name: "紅樓夢", price: 115},
{ id: 2, name: "西遊記", price: 86},
{ id: 3, name: "水滸傳", price: 68},
{ id: 4, name: "三國演義", price: 133}
]
},
//計算屬性
computed:{
totalPrice:function() {
let result=0;
for (let index = 0; index < this.books.length; index++)
result += this.books[index].price;
return result;
}
}
})
</script>
</body>
方法二
使用ES6中的語法，只改變for語句（使用in），其他與以上相同
computed:{
totalPrice:function() {
let result=0;
for(let i in this.books)
result += this.books[i].price;
return result;
}
}
方法三
使用ES6中的語法，只改變for語句（使用of），其他與以上相同
computed:{
totalPrice:function() {
let result=0;
for(let book of this.books)
//無需加this
result += book.price;
return result;
}
}