Vue2視訊教程系列第十一節-計算屬性
今天主要講一下vue的computed這個計算屬性的用法
computed屬性是實時響應的，當專案開發中依賴某個或者某些值的變化而變化時，我們就要用到computed。下面舉例來說明：
<div id="root">
<input type="" name="" v-model="firstName">
<input type="" name="" v-model="lastName">
<div id="fullname">全名是：{{ firstName + lastName }} </div>
</div>
js:
data() {
return {
firstName: '',
lastName: ''
}
}
當我們在input裡輸入不同的名字時，#fullname裡顯示的全名顯然是{{ firstName + lastName }}。這樣做完全沒有問題，惟一的問題是，在vue裡，各部分內容要各司其值，不要越位哈。我們需要淨化html裡的程式碼，不要被太多的邏輯運算而汙染，邏輯的內容要統統收納到js裡。這樣我們看著舒服，也容易理解，不會雜亂無章。而我們這個全名是完全依賴firstName和lastName，如果他們中的一個或者全部變化了，全名也會隨之而變化。這個前提條件符合我們對computed屬性的定義。所以接下來我們應用computed來編寫程式碼：
<div id="root">
<input type="" name="" v-model="firstName">
<input type="" name="" v-model="lastName">
<div id="fullname">全名是：{{ fullName }} </div>
</div>
js:
data() {
return {
firstName: '',
lastName: ''
}
},
computed: {
fullName () {
return this.firstName + this.lastName
}
}
在這裡我們需要注意的一點是， computed() 裡的 fullName 與 data 裡的資料不要重名，否則得不到結果。
有小夥伴會說，這跟寫在methods裡面沒啥區別嘛，methods裡也可以達到這樣的目的啊！沒錯，是完全可以的。但是有點需要勞記：computed屬性只有在相關依賴變化時，fullName才會重新求值，如果相關依賴沒有變化時，computed只會從快取中提取資料進行顯示；而methods呢，不管firstName或者lastName變不變化，只要被觸發，就會重新渲染。可見computed是可以大大提高效能的。
當我們在計算一個大型資料，而此資料又不經常變化時，無疑使用computed屬性是能夠大大提高效能的一種方式。
歡迎關注微信公眾號： duzhan99