位置: IT常识 - 正文

vue3使用nextTick(vue3使用ref获取元素)

编辑:rootadmin
vue3使用nextTick 发现nextTick必须放在修改一个响应式数据之后,才会在onUpdated之后被调用,如果nextTick是放在所有对响应式数据修改之前,则nextTick里面的回调函数会在onBeforeUpdate方法执行前就被调用了。可是nextTick必须等到onUpdated执行完成之后执行,才能拿到渲染得到的dom下面发请求的时候是没有使用async的(Promise的语法糖),它里面的then函数对serverRef的修改,会再一次触发组件重新渲染,也就是onBeforeUpdate和onUpdated又被回调了一次,也就是说,下面的toggleColor这个方法,触发了2次渲染。---onBeforeMounted---RefImpl {__v_isShallow: false, dep: undefined, __v_isRef: true, _rawValue: null, _value: null}---mounted---RefImpl {__v_isShallow: false, dep: undefined, __v_isRef: true, _rawValue: span, _value: span}halo world---onBeforeUpdate------onUpdated---RefImpl {__v_isShallow: false, dep: undefined, __v_isRef: true, _rawValue: button, _value: button}nextTick1res ojbk---onBeforeUpdate------onUpdated---nextTick2<template> <div style="display: flex;"> <ul class="ul-list"> <li v-for="i in num" :id="'li'+i" >{{ i }}</li> </ul> <div class="div-desc"> <input type="text" v-model="n"> <button @click="handleClick">修改num</button> <br> <br> <button @click="toggleColor">切换span颜色</button> <span ref="spanRef" :style="{color:colorRef}">span</span> *{{ serverResp }}* <button v-if="isShow" ref="btnRef">dd</button> </div> </div></template><script lang="ts" setup> import { ref,reactive,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,nextTick,getCurrentInstance } from 'vue' const { proxy } = getCurrentInstance() let num = ref(10) let n = ref(10) const btnRef = ref(null) let isShow = ref(false) let serverResp = ref('') const spanRef = ref(null) const handleClick = () => { num.value = parseInt(n.value) } const colorRef = ref('') const toggleColor = () => { debugger proxy.Request({ url:'http://localhost:8083/test' }).then(res=>{ debugger console.log('res',res); serverResp.value = res nextTick(()=>{ // 要放在对响应式数据修改之后 debugger console.log('nextTick2'); }) }) debugger isShow.value = true nextTick(()=>{ // 要放在对(至少一个)响应式数据修改之后, // 否则这里函数调用将拿不到btnRef,必须要等到onUpdated回调之后,执行nextTick里面的回调才能拿到btnRef debugger console.log(btnRef); console.log('nextTick1'); }) if(colorRef.value === 'red') { colorRef.value = 'blue' } else { colorRef.value = 'red' } num.value = num.value - 1 debugger console.log('halo world'); } onBeforeMount(() => { console.log('---onBeforeMounted---') console.log(spanRef); }) onMounted(()=>{ console.log('---mounted---') console.log(spanRef); spanRef.value.style.color = 'cyan' }) onBeforeUpdate(()=>{ debugger console.log('---onBeforeUpdate---') }) onUpdated(()=>{ debugger console.log('---onUpdated---') })</script><style lang="scss"> .ul-list { width: 100px; } .div-list { width: 300px; }</style>

推荐整理分享vue3使用nextTick(vue3使用ref获取元素),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue3使用vuex,vue3使用ref,vue3使用技巧,vue3使用技巧,vue3使用ref获取元素,vue3使用vuex,vue3使用vuex还是pinia,vue3使用vuex还是pinia,内容如对您有帮助,希望把文章链接给更多的朋友!

本文链接地址:https://www.jiuchutong.com/zhishi/296088.html 转载请保留说明!

上一篇:由浅入深介绍 Python Websocket 编程(由浅入深英语怎么说)

下一篇:设置背景图片大小的方法(设置背景图片大小和元素的大小一致的代码)

  • 苹果13什么时候开售(苹果13什么时候发售的)

    苹果13什么时候开售(苹果13什么时候发售的)

  • 华为荣耀20录屏可以录多久(华为荣耀20录屏没有声音怎么办)

    华为荣耀20录屏可以录多久(华为荣耀20录屏没有声音怎么办)

  • 华为nova5是不是水滴屏(华为nova6se怎么样)

    华为nova5是不是水滴屏(华为nova6se怎么样)

  • 放久的电脑开机无法显示(放久的电脑开不了机)

    放久的电脑开机无法显示(放久的电脑开不了机)

  • 网易云我喜欢的音乐播放次数怎么算(网易云我喜欢的音乐怎么删除)

    网易云我喜欢的音乐播放次数怎么算(网易云我喜欢的音乐怎么删除)

  • 高通865手机有哪几款(高通865手机哪个性价比最高?)

    高通865手机有哪几款(高通865手机哪个性价比最高?)

  • wps公式显示不全(wps公式显示不全,在不改变行距的情况下怎么办)

    wps公式显示不全(wps公式显示不全,在不改变行距的情况下怎么办)

  • win10切屏黑屏很久(win10切屏黑屏很久切不出去)

    win10切屏黑屏很久(win10切屏黑屏很久切不出去)

  • dotx是什么文件

    dotx是什么文件

  • 超清和高清哪个清晰(超清和高清哪个费流量)

    超清和高清哪个清晰(超清和高清哪个费流量)

  • 该频道未授权什么意思(该频道未授权是怎么回事)

    该频道未授权什么意思(该频道未授权是怎么回事)

  • 多多果园删好友后怎么加(多多果园删好友对方知道吗)

    多多果园删好友后怎么加(多多果园删好友对方知道吗)

  • 快手认证商家号有什么好处(快手认证商家号的话术)

    快手认证商家号有什么好处(快手认证商家号的话术)

  • word如何强调文字颜色(word如何强调文字颜色2)

    word如何强调文字颜色(word如何强调文字颜色2)

  • vivo投屏怎么设置方法(vivo投屏怎么设置快捷键)

    vivo投屏怎么设置方法(vivo投屏怎么设置快捷键)

  • 救赎是什么意思(肖申克的救赎是什么意思)

    救赎是什么意思(肖申克的救赎是什么意思)

  • 闲鱼账号被禁封怎么办(闲鱼账号禁封多久)

    闲鱼账号被禁封怎么办(闲鱼账号禁封多久)

  • 荣耀9xpro有耳机吗(荣耀9x有没有耳机接口)

    荣耀9xpro有耳机吗(荣耀9x有没有耳机接口)

  • 淘宝有夜间模式没有(淘宝有夜间模式怎么开)

    淘宝有夜间模式没有(淘宝有夜间模式怎么开)

  • 致谢幻灯片版式在哪(ppt致谢怎么写比较新颖)

    致谢幻灯片版式在哪(ppt致谢怎么写比较新颖)

  • 软件一直在安装中怎么办(电脑上怎么下载安装软件)

    软件一直在安装中怎么办(电脑上怎么下载安装软件)

  • 京东发货后怎么改地址(京东发货后怎么修改收货地址)

    京东发货后怎么改地址(京东发货后怎么修改收货地址)

  • 陌陌摩尔是做什么的(陌陌 摩尔)

    陌陌摩尔是做什么的(陌陌 摩尔)

  • 电脑进入省电模式怎么唤醒(电脑进入省电模式开不了机)

    电脑进入省电模式怎么唤醒(电脑进入省电模式开不了机)

  • Win11发热严重怎么办?Win11中的过热问题解决方法(win11发热严重怎么解决)

    Win11发热严重怎么办?Win11中的过热问题解决方法(win11发热严重怎么解决)

  • 法国西南部阿卡雄湾的皮拉沙丘 (© aluxum/iStock/Getty Images Plus)(法国西南部城市)

    法国西南部阿卡雄湾的皮拉沙丘 (© aluxum/iStock/Getty Images Plus)(法国西南部城市)

  • 库存商品损坏怎么做账
  • 委外加工怎么做仓库账
  • 资产处置收益是什么意思
  • 工程项目的存货含哪些科目
  • 共用的水电费支出怎么算
  • 长期负债率分析
  • 收到实收资本要交什么税
  • 赠送样品视同销售增值税该怎么做账务处理呢?
  • 付给供应商远期延期支票怎么做账?
  • 个体广告用去税务报账吗?
  • 房地产企业工程款支付流程
  • 季度所得税申报可以弥补以前年度亏损吗
  • 采购的增值税
  • 收到工会经费返还如何做账
  • 开启共享文件夹
  • win11更新失败怎么办
  • win10系统升级软件
  • 劳务费个税扣税
  • win没有投影到此电脑怎么办
  • 如何修复win7系统引导
  • php利用云片网实现短信验证码功能的示例代码
  • wordpress portfolio
  • 营改增前甲供材施工企业如何缴纳企业所得税
  • win10默认网关不可用总掉线解决方法
  • 工会经费用途规定
  • 灯光璀璨的夜晚
  • react 刷新
  • php gd gd2
  • 减免税费是几级科目
  • 头歌HTML基础第一关初识HTML
  • 技术部周报怎么写
  • js实现继承属性功能
  • 企业季度预缴土地出让金
  • 笨办法学python 3电子书下载
  • Python怎么把数据倒着输出
  • 如何让别人访问自己的qq空间
  • 小企业会计制度的适用对象是
  • 民营医疗机构是指哪些
  • mongodb安装教程图解
  • 借条这样写才有效
  • 在发票上盖了公章有用吗
  • mysql 查询平均值
  • 如何查询继续教育ic卡号
  • 汇算清缴银行手续费扣除比例是多少
  • 什么是异地企业
  • 一般纳税人销售自己使用过的物品
  • 年金一定是一年一次吗
  • 退教育费附加税怎么申报
  • 以固定资产换入无形资产
  • 递延收益金额怎么算
  • 进项税额和销项税额有什么区别
  • 实收资本减少的要交什么税
  • 税收优惠退回的税金怎么入账
  • 事业单位财务报销制度和流程
  • 商场代收款合法吗
  • 预付卡开不征税发票
  • 现金日记账怎么划线
  • 企业如何进行年报
  • solaris教程
  • 今后64位Win10 Mobile将是未来重点
  • win10无法双击
  • ghost10008解决办法
  • linux系统怎么启动软件
  • win10右键图片
  • shell中遍历数组
  • unity小例子
  • python生成器有几种写法
  • 基于javascript的毕业设计选题
  • 深入理解新发展理念
  • python系统监控
  • 福建2021年水利水电招聘
  • 进口设备免关税政策融资费
  • 付姓人数
  • 陕西省国家税务总局班子成员
  • 出口退税外汇汇率如何确定
  • 财税库银是什么税
  • 内蒙古国家税务局网上电子税务局官网
  • 普通手写发票税点多少
  • 耕地占用税减免税范围包括
  • 自助办税服务厅怎么用
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设