最近依旧在面试，故会把面试时遇到的一些问题整理下来供自己查阅。因为之前的项目用vue用的不多，所以在被问到computed和watch的区别的时候挺懵的，查了一些资料，稍作整理，供以后查阅。
计算属性（computed）
官方对于计算属性的解释是：
对于任何复杂逻辑，你都应当使用计算属性。计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
直接引用官方文档的例子：
<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 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
官方文档很清晰地表达了，watch是在执行一些复杂的操作时候使用的。更直观的例子，我们可以看下官方对computed和watch的对比：
以下代码是针对fullname这个属性的监听：
<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
}
}
})
可以明显的看出，在执行简单的计算操作时，computed比watch更简洁易读。
总结：
1.如果一个数据依赖于其他数据的简易计算处理的，那么使用computed比较合适。
2.如果需要在某个数据变化时做一些事情，使用watch来观察这个数据变化
参考资料：
