vue計算屬性詳解
計算屬性
在模板中繫結表示式是非常便利的，但是它們實際上只用於簡單的操作。在模板中放入太多的邏輯會讓模板過重且難以維護。例如：
| <div id="example"> {{ message.split('').reverse().join('') }}</div> |
在這種情況下，模板不再簡單和清晰。在實現反向顯示 message 之前，你應該確認它。這個問題在你不止一次反向顯示 message 的時候變得更加糟糕。
這就是為什麼任何複雜邏輯，你都應當使用計算屬性。
基礎例子
| <div id="example"> <p>Original message: "{{ message }}"</p |
| var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // a computed getter reversedMessage: function () { // `this` points to the vm instance return this.message.split('').reverse().join('' |
結果：
Original message: "Hello"
Computed reversed message: "olleH"
這裡我們聲明瞭一個計算屬性 reversedMessage 。我們提供的函式將用作屬性vm.reversedMessage 的 getter 。
| console.log(vm.reversedMessage) // -> 'olleH'vm.message = 'Goodbye'console.log(vm.reversedMessage) // -> 'eybdooG' |
你可以開啟瀏覽器的控制檯，修改 vm 。 vm.reversedMessage
vm.message 的值。你可以像繫結普通屬性一樣在模板中繫結計算屬性。 Vue 知道 vm.reversedMessage 依賴於vm.message ，因此當 vm.message 發生改變時，依賴於 vm.reversedMessage 的繫結也會更新。而且最妙的是我們是宣告式地建立這種依賴關係：計算屬性的 getter 是乾淨無副作用的，因此也是易於測試和理解的。
計算快取 vs Methods
你可能已經注意到我們可以通過呼叫表示式中的method來達到同樣的效果：
| <p>Reversed message: "{{ reverseMessage() }}"</p> |
| // in componentmethods: { reverseMessage: function () { return this.message.split('').reverse().join('') }} |
不經過計算屬性，我們可以在 method 中定義一個相同的函式來替代它。對於最終的結果，兩種方式確實是相同的。然而，不同的是計算屬性是基於它的依賴快取。計算屬性只有在它的相關依賴發生改變時才會重新取值。這就意味著只要 message 沒有發生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結果，而不必再次執行函式。
這也同樣意味著如下計算屬性將不會更新，因為 Date.now() 不是響應式依賴：
| computed: { now: function () { return Date.now() }} |
相比而言，每當重新渲染的時候，method 呼叫總會執行函式。
我們為什麼需要快取？假設我們有一個重要的計算屬性 A ，這個計算屬性需要一個巨大的陣列遍歷和做大量的計算。然後我們可能有其他的計算屬性依賴於 A 。如果有快取，我們將不需要多次執行 A 的 getter ！如果你不希望有快取，請用 method 替代。
計算屬性 vs Watched 屬性
Vue.js 提供了一個方法 $watch ，它用於觀察 Vue 例項上的資料變動。當一些資料需要根據其它資料變化時， $watch 很誘人 —— 特別是如果你來自 AngularJS 。不過，通常更好的辦法是使用計算屬性而不是一個命令式的 $watch 回撥。思考下面例子：
| <div id="demo">{{ fullName }}</div> |
| var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }, watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } }}) |
上面程式碼是命令式的和重複的。跟計算屬性對比：
| var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } }}) |
這樣更好，不是嗎？
計算 setter
計算屬性預設只有 getter ，不過在需要時你也可以提供一個 setter ：
| // ...computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } }}// ... |
現在在執行 vm.fullName = 'John Doe' 時， setter 會被呼叫， vm.firstName 和vm.lastName 也會被對應更新。
觀察 Watchers
雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的 watcher 。這是為什麼 Vue 提供一個更通用的方法通過 watch 選項，來響應資料的變化。當你想要在資料變化響應時，執行非同步操作或昂貴操作時，這是很有用的。
例如：
| <div id="watch-example"> <p> Ask a yes/no question: <input v-model="question"> </p> <p>{{ answer }}</p></div> |
| <!-- Since there is already a rich ecosystem of ajax libraries --><!-- and collections of general-purpose utility methods, Vue core --><!-- is able to remain small by not reinventing them. This also --><!-- gives you the freedom to just use what you're familiar with. --><script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script><script src="https://unpkg.com/[email protected]/lodash.min.js"></script><script>var watchExampleVM = new Vue({ el: '#watch-example', data: { question: '', answer: 'I cannot give you an answer until you ask a question!' }, watch: { // 如果 question 發生改變，這個函式就會執行 question: function (newQuestion) { this.answer = 'Waiting for you to stop typing...' this.getAnswer() } }, methods: { // _.debounce 是一個通過 lodash 限制操作頻率的函式。 // 在這個例子中，我們希望限制訪問yesno.wtf/api的頻率 // ajax請求直到使用者輸入完畢才會發出 // 學習更多關於 _.debounce function (and its cousin // _.throttle), 參考: https://lodash.com/docs#debounce getAnswer: _.debounce( function () { var vm = this if (this.question.indexOf('?') === -1) { vm.answer = 'Questions usually contain a question mark. ;-)' return } vm.answer = 'Thinking...' axios.get('https://yesno.wtf/api') .then(function (response) { vm.answer = _.capitalize(response.data.answer) }) .catch(function (error) { vm.answer = 'Error! Could not reach the API. ' + error }) }, // 這是我們為使用者停止輸入等待的毫秒數 500 ) }})</script> |
結果：
Ask a yes/no question:
I cannot give you an answer until you ask a question!
在這個示例中，使用 watch 選項允許我們執行非同步操作（訪問一個 API），限制我們執行該操作的頻率，並在我們得到最終結果前，設定中間狀態。這是計算屬性無法做到的。
除了 watch 選項之外，您還可以使用 vm.$watch API 命令。