您好,登錄后才能下訂單哦!
通常我們會在模板中綁定表達式,模板是用來描述視圖結構的。如果模板的表達式存在過多的邏輯,就會變得臃腫不堪,可維護和可讀性就會較差,因此,為了簡化邏輯,當某個屬性值依賴于其他屬性的值時,就可以使用計算屬性
來看一個簡單的計算屬性的例子
<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進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。