（1）計算屬性
模板內的運算式非常便利，但是設計它們的初衷是用于簡單運算的，在模板中放入太多的邏輯會讓模板過重且難以維護：
Original message: "{{ message }}"
Computed reversed message: "{{ reversedMessage }}"
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// this 指向 vm 實體
return this.message.split('').reverse().join('')
}
}
})
你可以像系結普通屬性一樣在模板中系結計算屬性，Vue 知道 vm.reversedMessage 依賴于 vm.message，因此當 vm.message 發生改變時，所有依賴 vm.reversedMessage 的系結也會更新，而且最妙的是我們已經以宣告的方式創建了這種依賴關系：計算屬性的 getter 函式是沒有副作用 (side effect) 的，這使它更易于測驗和理解，
（2）計算屬性快取vs方法
我們可以將同一函式定義為一個方法而不是一個計算屬性，兩種方式的最終結果確實是完全相同的，然而，不同的是計算屬性是基于它們的回應式依賴進行快取的，只在相關回應式依賴發生改變時它們才會重新求值，這就意味著只要 message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會立即回傳之前的計算結果，而不必再次執行函式，
（3）計算屬性 vs 偵聽屬性
偵聽屬性：當資料變化時呼叫的函式，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/169436.html
標籤：JavaScript
下一篇：如何增強前端代碼的健壯性