位置: IT常识 - 正文

Vue —— watch和watchEffect的区别(vue watch和computed)

编辑:rootadmin
Vue —— watch和watchEffect的区别 目录前言watch和watchEffect的对比watchwatchEffect深度解析watch函数深度解析watchEffect函数watchEffect与computed前言

推荐整理分享Vue —— watch和watchEffect的区别(vue watch和computed),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue watch和computed,vue里watch与compute,vue watch和methods,vue里watch与compute,vue,watch,vue computer watch区别,vue watch和mounted,vue watch和computed,内容如对您有帮助,希望把文章链接给更多的朋友!

watch函数与watchEffect函数都是监听器,在写法和用法上有一定区别,是同一功能的两种不同形态,底层都是一样的。

watch和watchEffect的对比watchwatch显式指定依赖数据,依赖数据更新时执行回调函数具有一定的惰性lazy 第一次页面展示的时候不会执行,只有数据变化的时候才会执行(设置immediate: true时可以变为非惰性,页面首次加载就会执行)监视ref定义的响应式数据时可以获取到原值既要指明监视的属性,也要指明监视的回调watchEffect

watchEffect自动收集依赖数据,依赖数据更新时重新执行自身

立即执行,没有惰性,页面的首次加载就会执行

无法获取到原值,只能得到变化后的值

不用指明监视哪个属性,监视的回调中用到哪个属性就监视哪个属性

深度解析watch函数

watch函数有两个小坑:

Vue —— watch和watchEffect的区别(vue watch和computed)

监视reactive定义的响应式数据(该数据为一个对象,因为reactive只能定义数组或对象类型的响应式)时:oldValue无法正确获取,会强制开启深度监视,deep配置不生效。

监视reactive定义的响应式数据中的某个属性时,且该属性是一个对象,那么此时deep配置生效。

具体的watch函数的用法在下面代码中都有所体现,注释详细

<template> <div> <h2>当前求和为:{{sum}}</h2> <button @click="sum++">点我+1</button> <hr> <h2>当前的信息为:{{msg}} </h2> <!-- 点击button拼接! --> <button @click="msg+='!'">修改数据</button> <hr> <h2>姓名:{{person.name}}</h2> <h2>年龄:{{person.age}}</h2> <h2>薪资:{{person.job.j1.salary}}</h2> <button @click="person.name+='~'"> 修改姓名</button> <button @click="person.age++"> 增长年龄</button> <button @click="person.job.j1.salary++"> 增长薪资</button> </div></template><script>import {ref,reactive,watch,watchEffect} from 'vue'export default { name:'demo', setup(){ //数据 let sum = ref(0) let msg = ref('hello') let person = reactive({ name:'zhangsan', age:'18', job:{ j1:{ salary:20 } } }) //监视(三个参数,第一个是监视的对象,第二个是监视的回调函数,第三个是监视的配置) //情况一:监视ref所定义的一个响应式数据 watch(sum,(newValue,oldValue)=>{ console.log('sum的值变化了',newValue,oldValue) },{immediate:true,deep:true}) //immediate的值为true时表示非惰性的立即执行的(默认情况下是false) //deep深层次触发(此处设置deep无意义) //情况二:监视ref所定义的多个响应式数据,写成数组的形式 watch([sum,msg],(newValue,oldValue)=>{ console.log('sum或者msg变了',newValue,oldValue) }) //情况三:监视reactive所定义的响应式数据 //若监视的是reactive定义的响应式数据,则无法正确获得oldValue //若监视的是reactive定义的响应式数据,则watch会强制开启深度监视 //我们发现改变person的任意一个属性都会被监视到 watch(person,(newValue,oldValue)=>{ console.log('person改变了',newValue,oldValue) }) //我们尝试设置deep:false,关闭深度监听(目的:改变job的值不会被watch监听到) //但是我们发现deep:false并没有生效,原因是此时watch监视的是reactive定义的响应式对象,默认强制开启了深度监听 watch(person,(newValue,oldValue)=>{ console.log('person改变了',newValue,oldValue) },{deep:false}) //情况四:监视reactive所定义的响应式数据中的某个属性 watch(()=>person.name,(newValue,oldValue)=>{ console.log('person的job改变了',newValue,oldValue) }) watch(()=>person.age,(newValue,oldValue)=>{ console.log('person的job改变了',newValue,oldValue) }) watch(()=>person.job,(newValue,oldValue)=>{ console.log('person的job改变了',newValue,oldValue) }) //从上边我们发现改变name,age都会触发监听,但是改变job不会 //这是因为name和age属性的值只是一个简单的基本类型数据, //而job属性的值是一个对象,比较深,想要监视到,就要开启深度监视,程序如下: watch(()=>person.job,(newValue,oldValue)=>{ console.log('person的job改变了',newValue,oldValue) },{deep:true})//此时job改变,会被监视到,此处的deep配置生效 //需要和情况三进行区分,此处watch监视的是reactive所定义的对象中的某个属性,而情况三watch监视的是reactive所定义的对象 //情况五:监视reactive所定义的响应式数据中的某些属性,写成数组的形式 watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{ console.log('person的name或age改变了',newValue,oldValue) }) //返回一个对象(常用) return{ sum, msg, person } }}</script>

watch取消监听

const stop1 = watch( [() => nameObj.name, () => nameObj.name], ([curName, curEng], [prevName, curEng]) => { console.log(curName, curEng, "----", prevName, curEng); setTimeout(() => { stop(); }, 5000); });深度解析watchEffect函数

函数用法如下代码所示,注释详细:

<template> <div> <h2>当前求和为:{{sum}}</h2> <button @click="sum++">点我+1</button> <hr> <h2>当前的信息为:{{msg}} </h2> <!-- 点击button拼接! --> <button @click="msg+='!'">修改数据</button> <hr> <h2>姓名:{{person.name}}</h2> <h2>年龄:{{person.age}}</h2> <h2>薪资:{{person.job.j1.salary}}</h2> <button @click="person.name+='~'"> 修改姓名</button> <button @click="person.age++"> 增长年龄</button> <button @click="person.job.j1.salary++"> 增长薪资</button> </div></template><script>import {ref,reactive,watch,watchEffect} from 'vue'export default { name:'demo', setup(){ //数据 let sum = ref(0) let msg = ref('hello') let person = reactive({ name:'zhangsan', age:'18', job:{ j1:{ salary:20 } } })//watchEffect函数内部所指定的回调中用到的数据只要发生变化,就会重新执行回调//只有一个参数,就是回调 watchEffect(()=>{ const x1 = sum.value//因为sum是ref定义的响应式数据,需要使用.value调用 const x2 = person.age console.log('watchEffect配置的回调执行了') }) return{ sum, msg, person } }}</script>

watchEffect取消监听

const stop = watchEffect(() => { console.log(nameObj.name); setTimeout(() => { stop(); }, 5000);});watchEffect与computed

watchEffect与computed有点像:

但是computed注重的计算出来的值(回调函数的返回值),所以必须要写返回值。

而watchEffect更注重的是过程(回调函数的函数体),所以不用写返回值。

computed若是值没有被使用时不会调用,但是watchEffect始终会调用一次

举例:

<template> <div> <h2>当前求和为:{{sum}}</h2> <button @click="sum++">点我+1</button> <hr> <h2>当前的信息为:{{msg}} </h2> <!-- 点击button拼接! --> <button @click="msg+='!'">修改数据</button> <hr> <h2>姓名:{{person.name}}</h2> <h2>年龄:{{person.age}}</h2> <h2>薪资:{{person.job.j1.salary}}</h2> <button @click="person.name+='~'"> 修改姓名</button> <button @click="person.age++"> 增长年龄</button> <button @click="person.job.j1.salary++"> 增长薪资</button> </div></template><script>import {ref,reactive,watch,watchEffect, computed} from 'vue'export default { name:'demo', setup(){ //数据 let sum = ref(0) let msg = ref('hello') let person = reactive({ name:'zhangsan', age:'18', job:{ j1:{ salary:20 } } }) let person1 = reactive({ firstName:'张', lastName:'三' }) //computed //计算属性——简写(没有考虑计算属性被修改的情况) person1.fullName = computed(()=>{ //必须含有返回值 return person1.firstName+'-'+person1.lastName }) //计算属性——完整写法(考虑读和写) person1.fullName = computed({ //必须含有返回值 get(){ return person1.firstName+'-'+person1.lastName }, set(value){ const nameArr = value.split('-') person1.firstName = nameArr[0] person1.lastName = nameArr[1] } }) //watchEffect //可以不写给返回值 watchEffect(()=>{ const x1 = sum.value//因为sum是ref定义的响应式数据,需要使用.value调用 const x2 = person.age console.log('watchEffect配置的回调执行了') }) return{ sum, msg, person, person1 } }}</script>
本文链接地址:https://www.jiuchutong.com/zhishi/300171.html 转载请保留说明!

上一篇:23年 车辆检测+车距检测+行人检测+车辆识别+车距预测(附yolo v5最新版源码)(2021年车辆检测)

下一篇:React Hook - useState函数的详细解析

  • 财产和行为税合并申报
  • 关联企业的判定标准
  • 受托代销商品款和受托代销商品的区别
  • 支付给个人的劳务费需要发票吗
  • 非独生子女赡养老人专项附加扣除的标准
  • 怎么看医疗报销单
  • 商品房空置费
  • 发行债券的会计要素
  • 销项税额计算公式13%
  • 应付账款坏账准备的会计分录
  • 购买完货物又退回怎么办
  • 月度资金计划明细表模板
  • 什么是前期差错
  • 以前年度亏损本季度盈利所得税
  • 增值税发票税率是星号
  • 税务稽查补缴的税款需要申报吗
  • 企业发给职工的全年一次性奖金不缴纳个人所得税对吗
  • 股权转让成本法和权益法
  • 小微企业季度所得税怎么计算
  • 个人装修可以开发票吗?
  • 税控盘服务费申报是在哪里填写
  • 去银行打回单需要带身份证吗
  • 销项税和进项税怎么区分
  • Linux中samba服务区怎么创建多个用户
  • 预付工程款如何计提坏账
  • 报销培训费怎么做账
  • 旅游费用账务处理
  • 苹果手机记事本提醒如何设置
  • 苹果手机无法加入WiFi
  • 苹果系统中怎么删除软件
  • 网速不稳定的解决方法
  • 个人所得税扣缴申报啥意思
  • PHP:imagesetpixel()的用法_GD库图像处理函数
  • PHP:zip_entry_open()的用法_Zip函数
  • 前端几种下载文件
  • php常用的魔术方法有哪些
  • 增值税价外费用是什么意思
  • 购进农产品增值税进项税额的确认方法
  • thinkphp3.2框架
  • 税负太高会预警吗
  • viwer.js
  • c罗my eyes never lie
  • ci框架视频教程
  • packet命令
  • wordpress限制ip访问
  • 管理费用包括哪些部门的工资
  • php网站用什么软件修改
  • 无法收回的应收账款怎么做分录
  • 服务费开票税收分类
  • 会计人员信息采集怎么看审核通过
  • 企业网银证书年费是什么
  • mongodb数据库中使用哪个数据库可以设置用户名和密码
  • 增量留底退税怎么比增值税高
  • 跨月的凭证出错如何处理
  • 无追索权保理的例外
  • 给销售培训产品该如何做
  • 商贸公司用什么软件好
  • 4s店销售返利
  • 公司账户的钱怎么合理的转出来
  • 工会经费是不是税费
  • 收到票据款
  • 修改mysql配置的两种方法
  • 微软历代操作系统
  • 搜索不到WiFi信号是怎么回事
  • win10更新补丁后键盘失灵
  • linux系统安装程序
  • VMware Workstation虚拟机网络连接不可用
  • mongoose怎么用
  • opengl入门教程(精)
  • 简单实现多彩慕斯蛋糕淋面的方法
  • Node.js中的什么模块是用于处理文件和目录的
  • 使用BMFont+NGUI利用图片制作自定义字体
  • vs2010编译器在哪里?
  • unity learning
  • js浏览器运行机制
  • js闭包的使用
  • android studio常用控件
  • 物业费增值税税率5%
  • 福建生育登记证明电子版在哪查
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设