watch 和 computed

相信小伙伴们平时开发应该都会用到watch 和 computed， 具体是什么区别?

官方解释：计算属性

• 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

  {{ message.split('').reverse().join('') }}

  在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到。
  这里是想要显示变量 message 的翻转字符串。当你想要在模板中多包含此处的翻转字符串时，就会更加难以处理。
  所以，对于任何复杂逻辑，你都应当使用计算属性。

计算属性是基于它们的响应式依赖进行缓存的

• 这句话中我们可以看到，计算属性是支持缓存的，如果你依赖的那个值没有变化的时候，会读取上一次缓存的计算结果。

计算属性和侦听属性

 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。
 当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。
 然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。

侦听属性： watch

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

总结

• 监听属性watch

1. 不支持缓存，数据变，会直接触发相应的操作；
2. watch支持异步；
3. 监听数据必须在实例中存在的。

• 计算属性computed

1. 支持缓存，只有依赖数据发生改变，才会重新进行计算
2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
3. 当读取computed属性值时会默认走缓存（依赖数据不变化不会重新计算），计算属性是基于他们的相应依赖进行缓存的

当需要在数据变化时执行异步或者开销较大的操作时，watch是最有用的。这是和computed最大的区别。