位置: IT常识 - 正文

vue组件强制刷新的方案(vue3刷新组件)

编辑:rootadmin
vue组件强制刷新的方案

推荐整理分享vue组件强制刷新的方案(vue3刷新组件),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue 强制刷新dom,vue如何强制刷新某个组件,vue 强制刷新dom,vue 强制刷新dom,vue强制刷新数组,vue强制刷新数组,vue强制刷新当前组件,vue强制刷新页面,内容如对您有帮助,希望把文章链接给更多的朋友!

前言: Vue的双向绑定属于自动档;在特定的情况下,需要手动触发“刷新”操作,目前有四种方案可以选择:

刷新整个页面(最low的,可以借助route机制)使用v-if标记(比较low的)使用内置的forceUpdate方法(较好的)使用key-changing优化组件(最好的)刷新整个页面this.$router.go(0);window.location.reload();使用v-if标记

如果是刷新某个子组件,则可以通过v-if指令实现。我们知道,当v-if的值发生变化时,组件都会被重新渲染一遍。因此,利用v-if指令的特性,可以达到强制刷新组件的目的。

<template> <comp v-if="refresh"></comp> <button @click="refreshComp()">刷新comp组件</button></template><script>import comp from '@/views/comp.vue'export default { name: 'parentComp', data() { return { refresh: true } }, methods: { refreshComp() { // 移除组件 this.refresh = false // 在组件移除后,重新渲染组件 // this.$nextTick可实现在DOM 状态更新后,执行传入的方法。 this.$nextTick(() => { this.refresh = true }) } }}</script>vue组件强制刷新的方案(vue3刷新组件)

流程分析: 1、初始化的时候refresh值为 true,组件渲染; 2、当我们调用refreshComp时,refreshComp会立刻变为false; 3、这个时候因为值为false组件就会停止渲染; 4、然后在nextTick中将refresh的值重新设置回去,组件重新渲染。

上面的流程主要有两个重要的点需要理解: 1、必须要在nextTick以后才能更改,否则会看不到效果 在Vue中,DOM的更新周期即为一个tick,在同一个tick内Vue会搜集变化,然后在tick的最后会根据变化的值去更新节点,如果我们不等到next tick,直接更新变量的值,不会触发节点的更新。 2、当我们重新渲染的时候,Vue将会创建一个新的组件。Vue销毁之前的重新创建新的意味着新的组件会重新走一遍生命周期。

forceUpdate

组件内置$forceUpdate方法,使用前需要在配置中启用。

import Vue from 'vue'Vue.forceUpdate()<template> <div> <button @click="handleUpdateClick()">Refresh当前组件</button> </div></template>export default { methods: { handleUpdateClick() { // built-in this.$forceUpdate() } }}

forceUpdate只会强制更新页面,不会更新现有的计算属性。

key-changing

原理很简单,vue使用key标记组件身份,当key改变时就是释放原始组件,重新加载新的组件。

<template> <div> <span :key="componentKey"></span> </div></template><script> export default { data() { return { componentKey: 0 } }, methods: { forceRerender() { this.componentKey += 1 // 或者 this.componentKey = new Date(); } } }</script>

进入页面输入框自动聚焦 一般情况下,加上以下代码就可以聚焦

<template> <div> <inputplaceholder="大家都在搜" type="text" maxlength="500" v-model="inputInfo.msg" @blur="resizeView" v-focus > </div></template><script> export default { data() { return { inputInfo: { // 输入框对象 num: 0, // 字数 msg: '' // 内容 }, } }, watch: { [`options.msg`] () { let length = utils.fancyCount2(this.inputInfo.msg); this.$set(this.inputInfo, 'num', length); } }, directives: { focus: { // 指令的定义 inserted: function(el) { el.focus(); } } }, methods: { /** * input元素失去焦点时触发 */ resizeView () { document.body.scrollIntoView(true); }, } }</script>

但是在有缓存的页面,一般就只有第一次会聚焦,后面进入都不会聚焦,办法就是用第四种强制刷新输入框来聚焦

<template> <div> <inputplaceholder="大家都在搜" type="text" maxlength="500" v-model="inputInfo.msg" @blur="resizeView" v-focus :key="inputInfo.focus" > <button @click="handleUpdateClick()">Refresh当前组件</button> </div></template><script> export default { data() { return { inputInfo: { // 输入框对象 num: 0, // 字数 msg: '', // 内容 focus: '', }, } }, activated () { this.inputInfo.focus = new Date().getTime(); }, methods: { handleUpdateClick() { // built-in this.inputInfo.focus = new Date().getTime(); } }</script>
本文链接地址:https://www.jiuchutong.com/zhishi/292986.html 转载请保留说明!

上一篇:【深度学习】目标检测的性能评价指标,mAP_0.5,mAP_0.5,0.95,0.05

下一篇:要点初见:Stable Diffusion NovelAI模型优质文字Tag汇总与实践【魔咒汇总】

  • 如何设置ppt中动画出现的先后顺序(如何设置ppt中动画的顺序)

    如何设置ppt中动画出现的先后顺序(如何设置ppt中动画的顺序)

  • 华为手机怎么滚动截长图聊天记录(华为手机怎么滚屏截屏)

    华为手机怎么滚动截长图聊天记录(华为手机怎么滚屏截屏)

  • 荣耀30和荣耀v30的区别在哪里(荣耀30和荣耀v30外形一样吗)

    荣耀30和荣耀v30的区别在哪里(荣耀30和荣耀v30外形一样吗)

  • 华为键盘声音怎么弄(华为键盘声音怎么关掉)

    华为键盘声音怎么弄(华为键盘声音怎么关掉)

  • 苹果实况壁纸在哪下载(苹果实况壁纸在哪)

    苹果实况壁纸在哪下载(苹果实况壁纸在哪)

  • 打电话响十声通话结束

    打电话响十声通话结束

  • uc阅读模式不见了(uc阅读模式怎么设置2020)

    uc阅读模式不见了(uc阅读模式怎么设置2020)

  • 手机与u盘的连接线(手机与u盘的连接)

    手机与u盘的连接线(手机与u盘的连接)

  • 微信语音通话流量一分钟多少m(微信语音通话流量大吗)

    微信语音通话流量一分钟多少m(微信语音通话流量大吗)

  • 微信红包可以撤回吗(微信红包可以撤回重发吗)

    微信红包可以撤回吗(微信红包可以撤回重发吗)

  • c++ static关键字的作用(c++中static关键字)

    c++ static关键字的作用(c++中static关键字)

  • 手机黑名单能收到对方短信吗(手机黑名单能收到未接电话)

    手机黑名单能收到对方短信吗(手机黑名单能收到未接电话)

  • 苹果6发热严重是什么原因(苹果发热严重还是安卓)

    苹果6发热严重是什么原因(苹果发热严重还是安卓)

  • iphone11突然没声音(苹果11无缘无故没有声音)

    iphone11突然没声音(苹果11无缘无故没有声音)

  • 微信最早版本是哪一年的(微信最早版本是多少)

    微信最早版本是哪一年的(微信最早版本是多少)

  • 手机电量还有40怎么突然关机了(手机电量还有40突然就没电了)

    手机电量还有40怎么突然关机了(手机电量还有40突然就没电了)

  • 移动pin码初始密码是多少(移动pin初始密码是多少)

    移动pin码初始密码是多少(移动pin初始密码是多少)

  • 华为手机屏幕闪跳(华为手机屏幕闪绿色横纹)

    华为手机屏幕闪跳(华为手机屏幕闪绿色横纹)

  • 手机重置后照片还在吗(手机重置后照片会删除吗)

    手机重置后照片还在吗(手机重置后照片会删除吗)

  • 微信的横屏模式是什么东西(微信的横屏模式怎么打开)

    微信的横屏模式是什么东西(微信的横屏模式怎么打开)

  • 荣耀9x解锁方式有几种(荣耀9x锁屏密码忘了怎么解)

    荣耀9x解锁方式有几种(荣耀9x锁屏密码忘了怎么解)

  • oppoa59s听筒声音小怎么办

    oppoa59s听筒声音小怎么办

  • iphone不信任软件怎么打开(iphone 不信任软件)

    iphone不信任软件怎么打开(iphone 不信任软件)

  • 快手提示身份证信息已经认证怎么办(快手提示身份证过期)

    快手提示身份证信息已经认证怎么办(快手提示身份证过期)

  • win11怎么静音? windows11关闭系统声音的技巧(win11怎么设置声音)

    win11怎么静音? windows11关闭系统声音的技巧(win11怎么设置声音)

  • 增值税不交什么后果
  • 盖了骑缝章的合同怎么写
  • 个税专项附加继续教育
  • 财产租赁合同金额含税吗
  • 滴滴能出票吗
  • 专票如何开具
  • 银行电子承兑汇票怎么转让
  • 房租收据样式
  • 财务会计制度名称一般是
  • 小规模人力资源外包税率
  • 公司租用个人房屋如何记账
  • 无偿划拨资产涉税问题
  • 公司开办费有哪些
  • 增值税普票跨月怎么冲红
  • 贷款公司收取服务费是诈骗吗
  • 保证金可以抵货款吗
  • 出口商品一定要有条形码吗
  • 公司向员工个人借款
  • 出口退税审核系统疑点
  • 递延收益相关的法律规定
  • 生活服务的发票可以报销吗
  • 个税滞纳金如何调增所得税费用
  • 金蝶kis迷你版操作手册
  • 外购商品用于招待怎么做账
  • harmonyos2.0缺点
  • 安全库存的三种算法
  • 出纳员交接工作
  • 脚手架属于什么费用
  • php去除空格和换行符
  • 代理业如何交增值税
  • 当月计算的增值税怎么算
  • 圣诞精灵什么意思
  • nacos安装包
  • 捷税宝被稽查了吗
  • pytorch .pt
  • nvm for windows
  • 申报经营所得成绩怎么填
  • 钢管租赁如何跑业务
  • 边际贡献分析法案例
  • 增值税为什么不在利润表里体现
  • 未认证和未抵扣的区别
  • 销售折让怎么写分录
  • 记账凭证如何进行记账
  • 一般纳税人认定标准
  • 融资租赁手续费进项税能抵扣吗
  • 开办费用怎么处理
  • 存量资金会计处理办法
  • 财政补助结转结转的依据
  • 报销差旅费属于付款凭证还是收款凭证
  • 影响折旧的因素有哪三个方面
  • 残保金计算人数1.02怎么计算
  • 工作地变更社保卡怎么办
  • 代理进口业务会计分录
  • mysql 定点数和浮点数
  • Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易配置方法
  • Centos安装dig命令
  • 进程是什么 进程类型
  • winXP运行内存查看
  • win8如何开启蓝牙
  • macbookair文档怎么变成word
  • helppane.exe是什么文件
  • centos搭建v2
  • win8.1 ie浏览器
  • 如何快速破局
  • 没有启动界面
  • windows10无法识别
  • Tutorial2 Hello dot!
  • cocos2d在运行java eclipse程序时出现 Error: could not open c:program FilesJavajre6libamd64jvm.cfg
  • andriod 控件
  • 常用的批处理文件
  • opengl glu
  • linux shell脚本教程
  • node 调用c
  • 批处理压缩
  • unity小游戏代码
  • nodejs await
  • js知识总结
  • python解析算法
  • 境外取得收入申报期限
  • 摩托车的消费税率
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设