407
vue 計算屬性
計算屬性
模板內的表達式是非常便利的，但是它們實際上隻用於簡單的運算。在模板中放入太多的邏輯會讓模板過重且難以維護。例如：
<div >
{{ message.split('').reverse().join('') }}
</div>
在這種情況下，模板不再簡單和清晰。在意識到這是反向顯示 message 之前，你不得不再次確認第二遍。當你想要在模板中多次反向顯示 message 的時候，問題會變得更糟糕
這就是對於任何複雜邏輯都應當使用計算屬性的原因
基礎例子
<div >
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () { // a computed getter
return this.message.split('').reverse().join('') // `this` points to the vm instance
}
}
})
</script>
這裏我們聲明了一個計算屬性 reversedMessage 。我們提供的函數將用作屬性 vm.reversedMessage 的 getter
console.log(vm.reversedMessage) // -> 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // -> 'eybdooG'
vm.reversedMessage 的值始終取決於 vm.message 的值。因此當 vm.message 發生改變時，所有依賴於 vm.reversedMessage 的綁定也會更新。而且最妙的是我們已經以聲明的方式創建了這種依賴關係：計算屬性的 getter 是沒有副作用，這使得它易於測試和推理
計算緩存 vs Methods
<p>Reversed message: "{{ reversedMessage() }}"</p>
<script>
methods: { // in component
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
</script>
我們可以將同一函數定義為一個 method 而不是一個計算屬性。對於最終的結果，兩種方式確實是相同的。然而，不同的是計算屬性是基於它們的依賴進行緩存的。計算屬性隻有在它的相關依賴發生改變時才會重新求值。這就意味著隻要 message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結果，而不必再次執行函數
這也同樣意味著如果把reverseMessage付給一個click事件，在computed方法中，多次點擊隻變換一次順序。相比而言，隻要發生重新渲染，method 調用總會執行該函數
我們為什麼需要緩存？假設我們有一個性能開銷比較大的的計算屬性 A ，它需要遍曆一個極大的數組和做大量的計算。然後我們可能有其他的計算屬性依賴於 A 。如果沒有緩存，我們將不可避免的多次執行 A 的 getter！如果你不希望有緩存，請用 method 替代
Computed屬性 vs Watched屬性
Vue 確實提供了一種更通用的方式來觀察和響應 Vue 實例上的數據變動：watch 屬性。當你有一些數據需要隨著其它數據變動而變動時，你很容易濫用 watch——特別是如果你之前使用過 AngularJS。然而，通常更好的想法是使用 computed 屬性而不是命令式的 watch 回調。細想一下這個例子：
<div >{{ fullName }}</div>
<script>
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
}
}
})
</script>
上麵代碼是命令式的和重複的。將它與 computed 屬性的版本進行比較：
<script>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
計算 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 >
<p>Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</div>
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/lodash@4.13.1/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: function (newQuestion) { // 如果 question 發生改變，這個函數就會運行
this.answer = 'Waiting for you to stop typing...'
this.getAnswer()
}
},
methods: {
getAnswer: _.debounce( // _.debounce 是一個通過 lodash 限製操作頻率的函數。在這個例子中，我們希望限製訪問yesno.wtf/api的頻率。ajax請求直到用戶輸入完畢才會發出
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>
使用 watch 選項允許我們執行異步操作（訪問一個 API），限製我們執行該操作的頻率，並在我們得到最終結果前，設置中間狀態。這是計算屬性無法做到的。
除了 watch 選項之外，您還可以使用 vm.$watch API 命令
最後更新：2017-06-10 14:32:02