位置: 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函数的详细解析

  • 华为nova9怎么开性能模式(华为nova9怎么开5g)

    华为nova9怎么开性能模式(华为nova9怎么开5g)

  • 抖音上怎么看访客记录(抖音上怎么看访客量)

    抖音上怎么看访客记录(抖音上怎么看访客量)

  • 苹果11怎么打开电池容量百分比(苹果11怎么打开5g网络)

    苹果11怎么打开电池容量百分比(苹果11怎么打开5g网络)

  • 华为nova5i有没有语音唤醒(华为nova5i有没有空调遥控)

    华为nova5i有没有语音唤醒(华为nova5i有没有空调遥控)

  • 微信白条闪付无法正常使用(白条闪付微信怎么用不了)

    微信白条闪付无法正常使用(白条闪付微信怎么用不了)

  • itunes目前无法处理您的购买,请稍后重试(itunes目前无法处理您的请求)

    itunes目前无法处理您的购买,请稍后重试(itunes目前无法处理您的请求)

  • 苹果11有夜景模式吗(苹果11有夜景模式在哪)

    苹果11有夜景模式吗(苹果11有夜景模式在哪)

  • 移动固态硬盘可以干嘛(移动固态硬盘可以恢复数据吗)

    移动固态硬盘可以干嘛(移动固态硬盘可以恢复数据吗)

  • 淘宝黑屏怎么回事啊(淘宝总黑屏)

    淘宝黑屏怎么回事啊(淘宝总黑屏)

  • psk密码是什么(pak密码是什么意思)

    psk密码是什么(pak密码是什么意思)

  • 钉钉直播自己会被看到吗(钉钉直播时候)

    钉钉直播自己会被看到吗(钉钉直播时候)

  • 华为荣耀lndal40参数(华为荣耀x30手机价格)

    华为荣耀lndal40参数(华为荣耀x30手机价格)

  • 抖音视频怎么设置锁屏华为(抖音视频怎么设置不让别人转发下载)

    抖音视频怎么设置锁屏华为(抖音视频怎么设置不让别人转发下载)

  • 华为nova5充电速度(华为nova5i充电速度慢的原因)

    华为nova5充电速度(华为nova5i充电速度慢的原因)

  • 怎样把软件移到内存卡(怎样把软件移到u盘里)

    怎样把软件移到内存卡(怎样把软件移到u盘里)

  • 抖音关注别人失败(抖音关注了对方,怎么突然没有了怎么找回来)

    抖音关注别人失败(抖音关注了对方,怎么突然没有了怎么找回来)

  • iphone8几核(iphone8几核处理器)

    iphone8几核(iphone8几核处理器)

  • 拼多多的差评怎么改(拼多多差评怎样才能让别人看不到差评?)

    拼多多的差评怎么改(拼多多差评怎样才能让别人看不到差评?)

  • 手机照明手电筒在哪里(手机照明手电筒下载)

    手机照明手电筒在哪里(手机照明手电筒下载)

  • 解释程序的功能是(解释程序的功能是将高级语言程序转换为目标程序)

    解释程序的功能是(解释程序的功能是将高级语言程序转换为目标程序)

  • 发朋友圈文字怎么不被折叠(发朋友圈文字怎么发)

    发朋友圈文字怎么不被折叠(发朋友圈文字怎么发)

  • 简单了解Linux系统中rev命令与tac命令的用法(“linux系统”)

    简单了解Linux系统中rev命令与tac命令的用法(“linux系统”)

  • 10分钟用Python编写贪吃蛇小游戏(python编程bim)

    10分钟用Python编写贪吃蛇小游戏(python编程bim)

  • 增值税发票勾选平台
  • 代建费用在哪里列支
  • 股权激励费用怎么摊销
  • 非税收入票据能否税前扣除
  • 高速公路费如何冲抵
  • 建筑公司可以开机械租赁发票吗
  • 申报增值税之后怎么做账
  • 其他应付款长期挂账如何处理
  • 红冲后的发票税可以办退税吗
  • 房地产开发企业预收款预缴增值税
  • 存货转为公允价值怎么算
  • 注销地税需要缴纳什么税费
  • 清算期间公司不再存续
  • 免抵退办法出口销售额和免税销售额的区别
  • 公司工资发放错误怎么退回
  • 材料暂估价比例
  • 工会经费有关的增值税能否抵扣?
  • 个人房源可以委托别人吗
  • 固定资产出售税务处理方法
  • 定额发票使用年限规定
  • 2017年一般纳税人增值税优惠
  • 插值法求利率计算公式
  • 公司负担劳务费的个税如何做分录
  • 技术服务收入和产品服务收入举个例子
  • 研发费收入属于什么收入
  • spf13-vim – Vim编辑器终极发布
  • win11开机后
  • 鸿蒙智能充电模式怎么用
  • 主营业务成本的二级科目有哪些
  • 付款后收到发票怎么写摘要
  • win11系统咋样
  • bassmod.dll
  • executor进程
  • linux如何管理进程
  • 年底所得税账务处理
  • php毫秒转换时分秒
  • php正则函数内容匹配
  • php 5
  • php的两种运行方式
  • 比肩美国
  • dede转zblog
  • 运输客票属于什么发票
  • 差旅费包干是什么意思
  • 什么样的资产可以执行
  • 移动平均法适用范围
  • wordpress安装主题致命错误
  • 进项税和销项税的分录
  • 建安企业确认收入的依据
  • 非盈利企业怎么做账
  • 委托加工物资的消费税
  • 进出口代理的账务怎么做
  • 个人所得税的计算标准
  • 支付技术研究开发费
  • 从农民手里租用土地用于科研要开发票吗
  • 年终奖和工资一起发吗
  • 什么是递延所得税?
  • 建账时应注意的事项有
  • DBCC CHECKIDENT 重置数据库标识列从某一数值开始
  • vista技巧:更改电源默认按钮为关机
  • 如何设置window图标大小
  • linux的lvm扩容
  • explorer.exe进程被结束怎么恢复
  • pphelper是什么文件
  • win8旗舰版官方下载
  • perl如何使用
  • unity 3d
  • Android与OpenCV2.4.4(2013最新)搭建图像处理框架
  • unityai寻路
  • nodejs indexof
  • ecmascript6 官方文档
  • unity-chan
  • jqgrid loadcomplete
  • 重庆电子税务局网页版登录
  • 土地税源编码怎么填
  • 网上交购置税怎么拿完税证明
  • 江苏电子税务局网站官网下载
  • 车船税的缴纳证明是什么意思?
  • 江西省国家税务局李德平
  • 查册证明怎么自动生成
  • 增值税专用发票怎么开
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设