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