站長資訊網(wǎng)vue計算屬性：在【Vue.js 0.12.8】版本之前，只要讀取相應(yīng)的計算屬性，對應(yīng)的getter就會重新執(zhí)行。而在【Vue.js 0.12.8】版本中，在這方面進行了優(yōu)化，即只有計算屬性依賴的屬性值發(fā)生了改變時才會重新執(zhí)行g(shù)etter。
vue計算屬性：
一、計算屬性
計算屬性就是當(dāng)其依賴屬性的值發(fā)生變化時，這個屬性的值會自動更新，與之相關(guān)的DOM部分也會同步自動更新。
代碼如下:
<div id="example"> <input type="text" v-model="didi"> <input type="text" v-model="family"> <br> didi={{didi}},family={{family}},didiFamily={{didiFamily}} </div> var vm = new Vue({ el:'#example', data:{ didi:'didi', family:'family' }, computed:{ <!-- 一個計算屬性的getter --> didiFamily:function(){ <!-- this指向vm實例 --> return this.didi+this.family } } })
當(dāng)vm.didi和vm.family的值發(fā)生變化時，vm.didiFamily的值會自動更新，并且會自動同步更新DOM部分。
前面實例只提供了getter，實際上除了getter。我們還可以設(shè)置計算屬性的setter。代碼示例如下:
<div id="example"> <input type="text" v-model="didi"> <input type="text" v-model="family"> <br> didi={{didi}},family={{family}},didiFamily={{didiFamily}} </div> var vm = new Vue({ el:'#example', data:{ didi:'didi', family:'family' }, computed:{ <!-- 一個計算屬性的getter --> didiFamily:function(){ get:function(){ <!-- this指向vm實例 --> return this.didi+this.family }, <!-- 一個計算屬性的setter --> set:function(newVal){ var names = newVal.split('') this.didi = names[0] this.didi = names[1] } } } })
當(dāng)設(shè)置vm.didiFamily的值時，vm.didi和vm.family的值也會自動更新。
二、計算屬性緩存
計算屬性的特性的確很誘人，但是如果在計算屬性方法中執(zhí)行大量的耗時操作，則可能會帶來一些性能問題。例如，在計算屬性getter中循環(huán)一個大的數(shù)組以執(zhí)行很多操作，那么當(dāng)頻繁調(diào)用該計算屬性時，就會導(dǎo)致大量不必要的運算。
在Vue.js 0.12.8版本之前，只要讀取相應(yīng)的計算屬性，對應(yīng)的getter就會重新執(zhí)行。而在Vue.js 0.12.8版本中，在這方面進行了優(yōu)化，即只有計算屬性依賴的屬性值發(fā)生了改變時才會重新執(zhí)行g(shù)etter。
這樣也存在一個問題，就是只有Vue實例中被觀察的數(shù)據(jù)屬性發(fā)生了改變時才會重新執(zhí)行g(shù)etter。但是有時候計算屬性依賴實時3的非觀察數(shù)據(jù)屬性。代碼示例如下：
var vm = new Vue({ data:{ welcome:'welcome to join didiFamily' }, computed:{ example:function(){ return Date.now() + this.welcome } } })
我們需要在每次訪問example時都取得最新的時間而不是緩存的時間。從Vue.js 0.12.11版本開始，默認(rèn)提供了緩存開關(guān)，在計算屬性對象中指定cache字段來控制是否開啟緩存。代碼示例如下：
var vm = new Vue({ data:{ welcome:'welcome to join didiFamily' }, computed:{ example:function(){ //關(guān)閉緩存，默認(rèn)為true cache:false, get:function(){ return Date.now() + this.welcome } } } })
設(shè)置cache為false關(guān)閉緩存之后，每次直接訪問vm.example時都會重新執(zhí)行g(shù)etter方法。
三、常見問題
在實際開發(fā)中使用計算屬性時，我們會遇到各種各樣的問題，以下是搜集到的一些常見問題以及解決方案。
計算屬性getter不執(zhí)行的場景
從前面我們了解到，當(dāng)計算屬性依賴的數(shù)據(jù)屬性發(fā)生改變時，計算屬性的getter方法就會執(zhí)行。但是在有些情況下，雖然依賴數(shù)據(jù)屬性發(fā)生了改變，但計算屬性的getter方法并不會執(zhí)行。但是在有些情況下，雖然依賴數(shù)據(jù)屬性發(fā)生了改變，但計算屬性的getter方法并不會執(zhí)行。
當(dāng)包含計算屬性的節(jié)點被移除并且模板中其他地方?jīng)]有再引用該屬性時，那么對應(yīng)的計算屬性的getter方法不會執(zhí)行。代碼示例如下：
<div id="example"> <button @click='toggleShow'>Toggle Show Total Price</button> <p v-if="showTotal">Total Price = {{totalPrice}}</p> </div> new Vue({ el:'#example', data:{ showTotal:true, basePrice:100 }, computed:{ totalPrice:function(){ return this.basePrice + 1 } }, methods:{ toggleShow:function(){ this.showTotal = !this.showTotal } } })
當(dāng)點擊按鈕使showTotal為false，此時P元素會被移除，在P元素內(nèi)部的計算屬性totalPrice的getter方法不會執(zhí)行。但是當(dāng)計算屬性一直出現(xiàn)在模板中時，getter方法還是會被執(zhí)行
2.在v-repeat中使用計算屬性
有時候從后端獲得JSON數(shù)據(jù)集合后，我們需要對單條數(shù)據(jù)應(yīng)用計算屬性。在Vue.js 0.12之前的版本中，我們可以在v-repeat所在元素上使用v-component指令。代碼示例如下：
<div id="items"> <p v-repeat="items" vue-component="item"> <button>{{fulltext}}</button> </p> </div> var items = [ {number:1,text:'one'}, {number:2,text:'two'} ] var vue = new Vue({ el:'#items', data:{ items:items }, components:{ item:{ computed:{ fulltext:function(){ return 'item' +this.text } }, } } })
在Vue.js 0.12版本中，Vue.js廢棄了v-component指令，所以我們需要使用自定義元素組件來實現(xiàn)在v-repeat中使用計算屬性。代碼示例如下：
<div id="items"> <my-item v-repeat="items" inline-template> </my-item> </div> var items = [ {number:1,text:'one'}, {number:2,text:'two'} ] var vue = new Vue({ el:'#items', data:{ items:items }, components:{ 'my-item':{ replace:true, computed:{ fulltext:function(){ return 'item' +this.text } }, } } })
相關(guān)免費學(xué)習(xí)推薦：js視頻教程
