写点什么

前端开发:Vue 中 computed 和 watch 对比使用

作者:三掌柜
  • 2021 年 12 月 18 日
  • 本文字数:1018 字

    阅读完需:约 3 分钟

前端开发:Vue中computed和watch对比使用

前言

最近在整理前端开发的知识点的时候,又找到了一个可以做对比说明的知识点,为了方便归纳记录,那么本篇博文就把前端开发过程中常用的 Vue 中 computed 和 watch 做对比举例来说明。

定义

首先先来了解一下 computed 和 watch 二者的基本定义和功能,具体的对比如下所示。

1、computed

computed,顾名思义,字面意思是计算,那么就和计算有关。在 Vue 中,computed 是计算属性,主要功能是监听观察页面数据变化之后再进行对应的计算回调操作。


2、watch

watch,字面意思是观察,那么就和观察数据有关。在 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 的实际使用场景如下所示:


最后

以上内容就是关于在前端 Vue 开发过程中 computed 和 watch 对比使用,方便读者查阅使用,尤其是以后再遇到类似的使用就可以很好的使用,这里不再赘述。欢迎关注三掌柜的微信公众号“程序猿 by 三掌柜”,三掌柜的新浪微博“三掌柜 666”,欢迎关注!


发布于: 2 小时前阅读数: 4
用户头像

三掌柜

关注

某某某技术有限责任公司架构师 2021.02.05 加入

一分耕耘,不一定有一分收获,但十分耕耘,一定会有一分收获!

评论 (1 条评论)

发布
用户头像
12月日更、28 天写作计划第十七天
2 小时前
回复
没有更多了
前端开发:Vue中computed和watch对比使用