溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
通常我們會在模板中綁定表達式，模板是用來描述視圖結構的。如果模板的表達式存在過多的邏輯，就會變得臃腫不堪，可維護和可讀性就會較差，因此，為了簡化邏輯，當某個屬性值依賴于其他屬性的值時，就可以使用計算屬性
來看一個簡單的計算屬性的例子
<div id="example">
<input type="text" v-model="a"/>
<input type="text" v-model="b"/>
<br>
a={{ a }},b={{ b }},c={{ c }}
</div>
var vm=new Vue({
el:"#example",
data:{
a:'a',
b:'b'
},
computed:{
c:{
get:function(){
return this.a+this.b
},
set:function(newVal){
var names=newVal.splite('')
this.a=names[0]
this.b=names[1]
}
}
}
})
在這個例子中，我們在html中只需要插入a，b，c即可，而背后的計算過程交由computed：計算屬性來解決，當a和b的值發生改變時，c的值也會改變，而當我們的c發生改變時，相對于的a和b的值也會發生改變
這樣看來，計算屬性的使用還是很舒服的，但是如果再計算屬性方法中執行大量的耗時操作，就可以會帶來一些性能問題，比如說：在計算屬性getter中循環一個大的數組以執行很多操作，那么當頻繁調用該計算屬性時，就會導致大量不必要的運算
在早期的Vue中，只要讀取相對于的計算屬性，就要執行一遍getter，但是在現在的Vue中，只有計算屬性依賴的屬性值發生改變才會執行新的getter
這就要說到計算屬性和方法的區別：計算屬性的緩存，基于依賴進行的緩存。即，當程序所依賴的觀察數據屬性發生改變之后，才重新執行getter，否則有緩存可以節省性能
只是這樣也有一個問題，只有Vue實例中被觀察的數據屬性發生了改變時才會重新執行getter，但是有時候計算屬性依賴實時的非觀察數據屬性（例如最新的時間），所以Vue提供了緩存開關（關鍵詞：cache），當我們將cache設為false時，每次執行都要重新執行一遍getter
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
