Vue中computed和watch的区别

**watch和computed都是以Vue的依赖追踪机制为基础的,**当某一个依赖型数据(依赖性数据:简单理解即放在data等对象下的实例数据)发生变化的时候,所有依赖这个数据的相关数据会自动发生变化,即自动调用相关的函数,来实现数据的变动。

当依赖的值变化时,在watch中,是可以做一些复杂的操作的,而computed中的依赖,仅仅是一个值依赖于另一个值,是值上的依赖。

应用场景:

computed:用于处理复杂的逻辑运算;一个数据受一个或多个数据影响;用来处理watch和methods无法处理的,或处理起来不方便的情况。例如处理模板中的复杂表达式、购物车里面的商品数量和总金额之间的变化关系等。​

watch:用来处理当一个属性发生变化时,需要执行某些具体的业务逻辑操作,或要在数据变化时执行异步或开销较大的操作;一个数据改变影响多个数据。例如用来监控路由、inpurt 输入框值的特殊处理等。

区别:

computed:

1.初始化显示或者相关的data、props等属性数据发生变化的时候调用;

2.计算属性不在data中,它是基于data或props中的数据通过计算得到的一个新值,这个新值根据已知值的变化而变化;

3.在computed属性对象中定义计算属性的方法,和取data对象里的数据属性一样,以属性访问的形式调用;

4.如果computed属性值是函数,那么默认会走get方法,必须要有一个返回值,函数的返回值就是属性的属性值;

5.computed属性值默认会缓存 计算结果,在重复的调用中,只要依赖数据不变,直接取缓存中的计算结果,只有依赖型数据发生改变,computed才会重新计算;

6.在computed中的,属性都有一个get和一个set方法,当数据变化时,调用set方法。

watch:

1.主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作,可以看作是computed和methods的结合体。

2.可以监听的数据来源:data, props, computed内的数据;

3.watch支持异步

4.不支持缓存,监听的数据改变,直接会触发相应的操作;

5.监听函数有两个参数,第一个参数是最新的值,第二个参数是输入之前的值,顺序一定是新值,旧值。

相关推荐
_阿南_7 小时前
项目中新增给AI制定的代码规范
前端·程序员
名字还没想好☜8 小时前
React 实现暗黑模式切换:localStorage 持久化、SSR 首屏闪烁与跟随系统主题
前端·javascript·react.js·ecmascript·react·next.js
自动化监测Learner8 小时前
主流 Web 端地图引擎对比:选型指南与优劣分析
javascript
console.log('npc')9 小时前
Git 冲突与 AI 协助指南
前端·人工智能·git·大模型
爱学堂IT分享10 小时前
Cesium可视化系统实战课程-Cesium教程学习
前端
糖墨夕10 小时前
理解大语言模型:Agent 的“大脑”
前端·agent
Rain的Java大神之路10 小时前
JavaWeb开发如何解决跨域问题
java·前端·后端·nginx·web安全·面试·运维开发
cpolar技术支持11 小时前
浏览器也能跑本地 AI:用 Transformers.js + WebGPU 做一个最小推理 Demo,cpolar 给同事远程体验
前端·ai·cpolar·webgpu·transformers.js
计算机毕设定制辅导-无忧学长11 小时前
《基于SpringBoot青年公寓出租管理系统的设计与实现》
java·vue.js·spring boot·青年公寓出租管理系统
计算机魔术师12 小时前
OpenAI 发布 GPT-6 Astra:多项基准刷新纪录, cybersecurity 能力达 Critical 阈值
前端