第4章 Vue計算屬性

2022-02-15 08:52:26 字數 1140 閱讀 1110

通常我們會在模板中繫結表示式,模板是用來描述檢視結構的。如果模板中的表示式存在過多的邏輯,模板會變得臃腫不堪,維護變得非常困難。因此,為了簡化邏輯,當某個屬性的值依賴於其他屬性的值時,我們可以使用計算屬性。

什麼是計算屬性

計算屬性就是當其依賴屬性的值發生變化時,這個屬性的值會自動更新,與之相關的dom部分也會同步自動更新。

計算屬性快取

計算屬性的特性的確很誘人,但是如果在計算屬性方法中執行大量的耗時操作,則可能會帶來一些效能問題。例如,在計算屬性getter中迴圈乙個大的陣列以執行很多操作,那麼當頻繁呼叫該計算屬性時,就會導致大量不必要的運算。

在vue.js 0.12.8版本之前,只要讀取相應的計算屬性,對應的getter就會重新執行。而在vue.js 0.12.8版本中,在這方面進行了優化,即只有計算屬性依賴的屬性值發生了改變才會重新執行getter。

這樣也存在乙個問題,就是只有vue例項中被觀察的資料屬性發生了改變時才會重新執行getter。但是有時候計算屬性依賴實時的非觀察資料屬性。

var vm = new vue(,

computed:}})

我們需要每次訪問example都取得最新的時間而不是快取時間。從vue.js 0.12.11 版本開始,預設提供了快取開關,在計算屬性物件中指出cache欄位來控制是否開啟快取。var vm = new vue(,

computed:}}

})設定cache為false關閉快取之後,每次直接訪問vm.example時都會重新執行getter方法。

常見問題:

①計算屬性getter不執行的場景

我們了解到,當計算屬性依賴的資料屬性發生改變時,計算屬性的getter方法就會執行。但是有些情況下,雖然依賴資料屬性發生了改變,但是計算屬性的getter方法並不會執行。

當包含計算屬性的節點被移除並且模板中其他地方沒有再引用該屬性時,那麼對應的計算屬性的getter方法不會執行。

②在v-repeat中使用計算屬性

有時候從後端獲得json資料集合後,我們需要對單條資料應用計算屬性。在vue.js 0.12之前的版本中,我們可以在v-repeat所在元素上使用v-vomponent指令。在vue.js 0.12之後的版本中,廢棄了v-component指令,所以我們需要自定義元素元件來實現在v-repeat中使用計算屬性。

第4章 協議屬性

一 osi參考模型 應用層表示層 會話層傳輸層 網路層資料鏈路層 物理層二 全域性協議分類 1 面向連線的協議 windows size 在需要目標系統確認的傳輸的資料報數。佇列資料傳送 對進入和傳送的pdu指定序號,在目的地再按序號重排資料 流控 確保傳送的速率不超過目標接收的速率,通過為傳輸建立...

vue 4 計算屬性 監聽屬性

div newvue script 例項 1中模板變的很複雜起來,也不容易看懂理解。接下來我們看看使用了計算屬性的例項 原始字串 p 計算後反轉字串 p div var vm newvue computed script computed 與 methods 我們可以使用 methods 來替代 c...

vue爬坑之路4 計算屬性

original message computed reversed message var vm new vue in comonet methods data.now 返回當前時間字串 相比而言,每當重新渲染的時候,method呼叫總會執行函式。關於快取。假設有乙個重要的計算屬性a,這個計算屬性...