最近依舊在面試，故會把面試時遇到的一些問題整理下來供自己查閱。因為之前的項目用vue用的不多，所以在被問到computed和watch的區(qū)別的時候挺懵的，查了一些資料，稍作整理，供以后查閱。
計算屬性（computed）
官方對于計算屬性的解釋是：
對于任何復(fù)雜邏輯，你都應(yīng)當(dāng)使用計算屬性。計算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的。只在相關(guān)響應(yīng)式依賴發(fā)生改變時它們才會重新求值。
直接引用官方文檔的例子：
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// `this` 指向 vm 實例
return this.message.split('').reverse().join('')
}
}
});
偵聽器（watch）
Vue 通過 watch 選項提供了一個更通用的方法，來響應(yīng)數(shù)據(jù)的變化。當(dāng)需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，這個方式是最有用的。
官方文檔很清晰地表達(dá)了，watch是在執(zhí)行一些復(fù)雜的操作時候使用的。更直觀的例子，我們可以看下官方對computed和watch的對比：
以下代碼是針對fullname這個屬性的監(jiān)聽：
<div id="demo">{{ fullName }}</div>
使用watch：
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
}
}
})
使用computed：
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
可以明顯的看出，在執(zhí)行簡單的計算操作時，computed比watch更簡潔易讀。
總結(jié)：
1.如果一個數(shù)據(jù)依賴于其他數(shù)據(jù)的簡易計算處理的，那么使用computed比較合適。
2.如果需要在某個數(shù)據(jù)變化時做一些事情，使用watch來觀察這個數(shù)據(jù)變化
參考資料：
