vue computed使用_前端开发：Vue中computed和watch对比使用

最近在整理前端开发的知识点的时候，又找到了一个可以做对比说明的知识点，为了方便归纳记录，本篇博文就把前端开发过程中常用的Vue中computed和watch做对比举例说明。首先先来了解一下computed和watch二者的基本定义和功能：1、computedcomputed，顾名思义，字面意思是计算，那么就和计算有关。在Vue中，computed是计算属性，主要功能是监听观察页面数据变化之后再进行对应的计算回调操作。2、watchwatch，字面意思是观察，那么就和观察数据有关。在Vue中，watch是侦听属性，主要功能是观察数据变化，不管页面数据是否变化都要执行函数。上述两点只是大概的一个功能描述，那么接下来再对computed和watch二者的相同点和不同点进行分析。computed和watch相同点：都有观察页面数据变化的功能。computed和watch不相同点：①功能上：computed只有在页面数据发生改变变化的时候才会进行计算操作，若数据没有变化，只读取缓存；watch每次使用都需要执行函数操作。computed是计算属性，watch是监听一个值的变化，然后执行对应的回调函数。②是否返回：computed中的函数必须要调用return返回，watch中的函数不是必须调用return返回。③是否调用缓存：computed中的函数如果依赖的属性没有发生改变变化，那么调用当前函数就会读取缓存，watch在每次监听的值发生变化的时候都会执行回调函数。④使用场景：当某个值依赖于多个值的时候，推荐使用computed，因为如果其中任何一个值发生变化，该值都能及时更新，也就是在页面中使用大量或复杂的表达式来处理数据的时候适合使用computed的计算属性来处理复杂的逻辑运算操作；当某个值被多个值依赖的时候，推荐使用watch，因为如果这个值发生变化时，所有依赖它的值都会及时更新，也就是数据变化时执行异步操作的时候适合用watch。⑤通俗对比：当业务逻辑需要一个值，一个属性的时候，它是不固定的而且逻辑复杂，而且在模板里不直观的展现，或者说需要多次使用该值，那么就适合使用computed；当业务逻辑需要监控某个变量值，根据其改变后进行某个操作的时候，那么就适合使用watch。3、简单的使用案例①computed的实际使用场景如下所示：

②watch的实际使用场景如下所示：

以上就是本章全部内容，欢迎关注三掌柜的微信公众号“iOS开发by三掌柜”，三掌柜的新浪微博“三掌柜666”，欢迎关注！三掌柜的微信公众号：

三掌柜的新浪微博：