計算屬性和監聽器
計算屬性
首先我們知道，模版內的表達式非常便利，但是設計他們的初衷時由於簡單運算的，在模版中國放入太多的邏輯會這個模版難以維護。因此計算屬性應運而生。
如果不適用計算屬性帶來的復雜程度可以看下面的例子
### 對於復雜的邏輯而言，我們更多的應該使用計算屬性
下面我們來看一個基礎的例子
```html
<div id="app">
<p>{{ msg }}</p>
<!-- 及其復雜的邏輯表達式非常不容易去維護 -->
<p>{{ msg.split('').reverse().join('') }}</p>
</div>
const vm = new Vue({
el: '#app',
data: {
msg: 'hello'
}
})
當我們使用計算屬性的時候，看看效果的方便
<div id="app">
<p>{{ msg }}</p>
<p>{{ msg.split('').reverse().join('') }}</p>
<p>{{ reveredMessage }}</p>
</div>
js
const vm = new Vue({
el: '#app',
data: {
msg: 'hello',
},
computed: {
// 計算屬性的getter
reveredMessage: function () {
// this 指向時vm的實例
return this.msg.split('').reverse().join('')
}
}
})
計算屬性緩存vs方法
當然我們可以注意到，我們可以在表達式中調用方法來達到同樣的效果。
如同下面這個使用方法的例子
<!-- 這個方法直接調用來methods中的方法 -->
<p> 調用methods中的方法 {{ changeMsg() }} </p>
js部分
// 直接簡寫
methods: {
changeMsg() {
return this.msg.split('').reverse().join('')
}
}
我們可以將同一個函數定義一個方法而不是一個計算屬性。兩種方式的最終結果確實完全相同的，然而，不同的計算屬性是基於他們的響應式依賴進行緩存的，只在相關響應式依賴發生改變時，他們才會重新求值。這就意味這只要msg還沒發生改變，多次訪問reveredMessage計算屬性會立即返回之前的計算結果，而不必再次執行函數。
這樣也同樣的意味這下面的計算屬性將不再更新，因為 Date.now()不是響應式依賴：
computed: {
now: function () {
return Date.now()
}
}
相比之下，每當觸發重新渲染時，調用方法總會再次執行函數
思考 我們為什么使用computed計算屬性，在我看來，簡單來說，計算屬性可以緩存。
為們為什么需要緩存？假如我們有一個性能開銷比較大的計算屬性getCount, 它需要遍歷一個巨大的數組並作出大量的計算。然后我們有可能有其他的計算屬性依賴於getCount,如果沒有緩存，我們將不可避免的多次去執行getCount的getter！。。。。當然了，如果你不希望有緩存，換一句話來說，你可以使用方法來代替。
計算屬性vs偵聽屬性
Vue提供了一種更為通用的方式來觀察和響應Vue實列上的數據變化：偵聽屬性。當然你有一些數據需要隨着其他數據的變化而變動時你很容易濫用wathch，--。
然而呢，我們最好的做法時使用計算屬性而不是命令式的watch回調。
下面我們可以想想這個例子
<p> {{ fullName }} </p>
主要看js代碼
cosnt vm = new Vue({
el: '#app',
data: {
firstName: '',
lastName: '',
fullName: '',
},
watch: {
firstName: function (newVal, oldVal) {
this.fullName = newVal + this.lastVal
},
lastName: function (newVal, oldVal) {
this.fullName = this.firstName + newVal
}
}
})
使用watch的話每次就只能監聽到一個屬性。而且命令是重復的，將它和計算屬性進行對比。
<p> {{ fullName }} </p>
看js代碼
cosnt vm = new Vue({
el: '#app',
data: {
firstName: '',
lastName: '',
// fullName: '',
},
computed: {
fullName: {
// 只需要執行一次就OK
return this.firstName + this.lastName
}
}
})
偵聽器
雖然計算屬性在大多數情況下更加適合，但有時候也需要一個自定義的偵聽器。這就是為什么Vue通過watch選項提供了一個更加通用的方法，來響應數據的變化。當需要在數據變化時執行異步或者開銷較大的操作時，這個方法時最有用的。
總結 以上這個例子，使用的watch選項中允許我們執行異步操作（訪問一個API），限制我們執行該操作的頻率，並在我們最終結果前，設置中間狀態／。這些計算屬性是無法做到的。
當然我們除了有watch之外，我們還可以使用vm.$watch 這個API。