官方文档vue-计算属性
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('')
}
}
});总结：
1.变量不在 data中定义，而是定义在computed中，有返回值。函数名直接在页面模板中渲染，不加小括号 。
2.根据传入的变量的变化 进行结果的更新。
3.计算属性基于响应式依赖进行缓存。如其中的任意一个值未发生变化，它调用的就是上一次 计算缓存的数据，因此提高了程序的性能。而methods中每调用一次就会重新计算 一次，为了进行不必要的资源消耗，选择用计算属性。
watch——>侦听器
只监听单个数据
Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
watch和computed对比
watch是在执行一些复杂的操作时候使用的。更直观的例子，我们可以看下官方对computed和watch的对比：
以下代码是针对fullname这个属性的监听：
使用watch
使用computed
可以明显的看出，在执行简单的计算操作时，computed比watch更简洁易读。
总结：
1.计算属性变量在computed中定义，属性监听在data中定义。
2.计算属性是声明式的描述一个值依赖了其他值，依赖的值改变后重新计算结果更新DOM。属性监听的是定义的
变量，当定义的值发生变化时，执行相对应的函数。
3.如果一个数据依赖于其他数据的简易计算处理的，那么使用computed比较合适。
4.如果需要在某个数据变化时做一些事情，使用watch来观察这个数据变化