相信小伙伴们平时开发应该都会用到watch 和 computed， 具体是什么区别?
官方解释：计算属性
- 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到。
这里是想要显示变量 message 的翻转字符串。当你想要在模板中多包含此处的翻转字符串时，就会更加难以处理。
所以，对于任何复杂逻辑，你都应当使用计算属性。
计算属性是基于它们的响应式依赖进行缓存的
- 这句话中我们可以看到，计算属性是支持缓存的，如果你依赖的那个值没有变化的时候，会读取上一次缓存的计算结果。
计算属性和侦听属性
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。
当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。
然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。
侦听属性： watch
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
总结
- 监听属性watch
- 不支持缓存，数据变，会直接触发相应的操作；
- watch支持异步；
- 监听数据必须在实例中存在的。
- 计算属性computed
- 支持缓存，只有依赖数据发生改变，才会重新进行计算
- 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
- 当读取computed属性值时会默认走缓存（依赖数据不变化不会重新计算），计算属性是基于他们的相应依赖进行缓存的
当需要在数据变化时执行异步或者开销较大的操作时，watch是最有用的。这是和computed最大的区别。
