Vue中computed和watch有何区别及具体使用场景？

本文共计1768个文字，预计阅读时间需要8分钟。

computed属性说明：computed基于响应性依赖进行缓存。只有依赖的数据发生变化，computed才会重新计算（即：触发重新渲染，依赖数据没有变化，则computed不会重新计算）。

computed 计算属性说明:

computed 是基于响应性依赖来进行缓存的。只有依赖数据发生改变，才会重新进行计算（当触发重新渲染，若依赖数据没有改变，则 computed 不会重新计算）。若没改变，计算属性会立即返回之前缓存的计算结果。

不支持异步，当 computed 内有异步操作时无效，无法监听数据的变化的值。

computed 中的成员可以只定义一个函数作为只读属性, 也可以定义成 get/set 变成可读写属性

如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用 computed。

下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

computed: { now: function () { return Date.now() } }

相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

watch 监听属性说明：

不支持缓存，数据变或者触发重新渲染时，直接会触发相应的操作。