Vue中computed 和 watch 的区别和运用的场景？

78 阅读 0 评论 52 点赞

我是靠谱客的博主自信店员，最近开发中收集的这篇文章主要介绍Vue中computed 和 watch 的区别和运用的场景？，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

答：
首先，computed 和 watch都可以添加实现监听。
其次，我去从他们的本质和运用场景区分一下他们。
第一个方面就是从本质来说：
computed：它是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算 computed 的值，它可以设置getter和setter.
watch：更多的是「观察」的作用，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作,它只能设置getter。
第二个方面就是他们的运用场景不同：
computed：当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
watch：当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。