Vue中computed和watch的区别
admin
2024-03-28 23:48:06
0

Vue中computed和watch的区别

watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个或多个数据(称它们为依赖数据)发生变化的时候,所有依赖这些数据的 “相关” 数据 “自动” 发生变化,也就是自动调用相关的函数去实现数据的变动

二、computed计算属性

  1. 支持缓存,只有依赖数据发生改变,才会重新进行计算;如果函数所依赖的属性没有发生变化,从缓存中读取
  2. 必须有return返回
  3. 使用方法和data中的数据一样,但是类似一个执行方法
  4. 不支持异步,当computed内有异步操作时无效,无法监听数据的变化;

  5. computed是计算属性,也就是依赖某个值或者props通过计算得来的数据

  6. computed的值是在getter执行之后进行缓存的,只有在它依赖的数据发生变化(依赖的数据可以是单个,也可以是多个)时,会重新调用getter来计算;

注意:就算data中没有直接声明要计算的变量,也可以直接在computed中写入,如下示例:

{{fullName}}

计算属性默认只有getter,可以在需要的时候自己设定setter(所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例):

computed: {fullName: {// getterget: function () {return this.firstName + ' ' + this.lastName},// setterset: function (newValue) {var names = newValue.split(' ')this.firstName = names[0]this.lastName = names[names.length - 1]}}}//这个时候在控制台直接运行【vm.fullName = ‘bibi wang’】,相应的firstName和lastName也会改变。

(2)watch

1、不支持缓存,数据变,直接会触发相应的操作;

2、支持异步操作;

3、watch是监听器,可以监听某一个数据,然后执行相应的操作;

4、监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;

5、watch的函数名必须和data中的数据名一致

6、watch中的函数有俩个参数,新旧

7、watch中的函数是不需要调用的

8、只会监听数据的值是否发生改变,而不会去监听数据的地址是否发生改变,要深度监听需要配合deep:true属性使用

9、immediate:true 页面首次加载的时候做一次监听

var vm = new Vue({el: '#app',data: {firstName: 'Foo',lastName: 'Bar',fullName: 'Foo Bar'},watch: {firstName: function (newVal,oldVal) {this.fullName = newVal + ' ' + this.lastNameconsole.log(newVal+'========='+oldVal)//Fooaaaa=========Foo},lastName: function (newVal,oldVal) {this.fullName = this.firstName + ' ' + newValconsole.log(newVal+'========='+oldVal)//Baraaaa=========Bar}}})

注意:如果data中没有相应的属性的话,是不能watch的,这点和computed不一样。

四、区别

1、功能:computed是计算属性,watch是监听一个值的变化而执行对应的回调

2、是否调用缓存:computed函数所依赖的属性不变的时候会调用缓存;watch每次监听的值发生变化时候都会调用回调

3、是否调用return:computed必须有;watch可以没有

4、使用场景:computed当一个属性受多个属性影响的时候;例如购物车商品结算;watch当一条数据影响多条数据的时候,例如搜索框

5、是否支持异步:computed函数不能有异步;watch可以

总结

  • 当多个属性影响一个属性的时候,建议用computed

  • 当一个值发生变化之后,会引起一系列的操作(改变其他属性值),这种情况就适合用watch

相关内容

热门资讯

安卓系统所有手机通用,揭秘所有... 你有没有发现,现在市面上各种各样的手机,品牌琳琅满目,让人挑花了眼?不过,不管你用的是哪个品牌的手机...
安卓系统变ios系统好用吗,体... 你有没有想过,为什么有些人从安卓手机换到了苹果的iPhone,而且好像换了之后整个人都精神焕发呢?没...
华为安卓系统文件删除,轻松掌握... 你有没有遇到过这种情况?手机里的文件突然不见了,尤其是华为安卓系统里的那些重要文件,真是让人心头一紧...
安卓1.5系统软件,初代智能革... 你有没有想过,手机里的那些看似普通的系统,其实背后藏着无数的故事呢?今天,就让我带你走进安卓1.5系...
安卓 代替系统音效设置,打造个... 你有没有发现,手机里的那些系统音效有时候真的让人有点烦躁呢?比如那个每次接电话时“叮咚”一声,或者是...
安卓系统整体性,构建移动设备的... 你知道吗?在智能手机的世界里,安卓系统就像是个全能的魔术师,它不仅拥有丰富的魔法,还能让各种神奇的魔...
安卓系统能玩鬼泣么?,畅享动作... 你有没有想过,在安卓系统上玩《鬼泣》这款游戏会是怎样的体验呢?没错,就是那个让你热血沸腾、挑战极限的...
安卓系统手机编曲软件,音乐创作... 你有没有想过,用手机也能轻松编曲?没错,就是那个你每天不离手的安卓系统手机!现在,我就要给你揭秘几款...
车载导航显示安卓系统,车载导航... 你有没有发现,现在的车载导航系统越来越智能了?尤其是那些搭载了安卓系统的车载导航,简直就像是个贴心的...
安卓系统启动黑屏,安卓系统启动... 手机屏幕突然黑了,这可怎么办?别急,今天就来和你聊聊安卓系统启动黑屏这个让人头疼的问题。你知道吗,这...
怎么解除订阅安卓系统,安卓系统... 你是不是也和我一样,手机里订阅了好多服务,结果现在想解除订阅,却一头雾水?别急,今天就来手把手教你如...
安卓系统停用怎么开启,轻松恢复... 亲爱的手机控们,你是否曾经遇到过安卓系统突然停用的情况,让你手忙脚乱,不知所措?别担心,今天就来教你...
安卓系统电池健康度,电池健康度... 你有没有发现,你的安卓手机最近是不是有点儿不给力了?电池续航能力大不如前,充电速度也慢了不少?别急,...
安卓系统按键怎么截图,安卓系统... 你是不是也和我一样,有时候想截个图分享给朋友,却发现安卓手机的截图功能有点神秘呢?别急,今天就来手把...
购票系统安卓源代码,架构设计与... 你有没有想过,那些我们每天离不开的购票系统,它们背后的秘密是什么呢?今天,就让我带你一探究竟,揭开购...
安卓手机系统后台测试,深度解析... 你有没有发现,你的安卓手机后台总是悄悄地忙碌着?别小看了这些后台程序,它们可是手机系统稳定运行的关键...
安卓系统重启的图标,解锁设备新... 手机突然重启,是不是心里有点慌?别急,今天就来和你聊聊安卓系统重启的图标,让你一眼就能认出它,再也不...
车载智慧屏安卓系统,智能出行新... 你有没有发现,现在的车载智慧屏越来越智能了?尤其是那些搭载了安卓系统的,简直就像是个移动的小电脑,不...
安卓系统连上网权限,解锁设备无... 你有没有发现,你的安卓手机里有些应用总是偷偷连上网?别小看这个小小的网络权限,它可是能影响你隐私、消...
安卓谷歌操作系统,探索安卓谷歌... 你知道吗?在智能手机的世界里,有一个操作系统可是无人不知、无人不晓,那就是安卓谷歌操作系统。它就像一...