位置: 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汇总与实践【魔咒汇总】

  • 公积金流水去哪里打印(公积金流水在哪里)

    公积金流水去哪里打印(公积金流水在哪里)

  • 行程码带星是什么情况(行程码带星是什么样的显示什么)

    行程码带星是什么情况(行程码带星是什么样的显示什么)

  • 钉钉电子签名怎么弄(钉钉电子签名怎么签)

    钉钉电子签名怎么弄(钉钉电子签名怎么签)

  • 手机qq在线状态修改为自己喜欢的话(手机qq在线状态自动变成离开)

    手机qq在线状态修改为自己喜欢的话(手机qq在线状态自动变成离开)

  • ipad蓝牙搜不到罗技键盘(ipad蓝牙搜不到红米buds4)

    ipad蓝牙搜不到罗技键盘(ipad蓝牙搜不到红米buds4)

  • 怎样关闭微信运动(怎样关闭微信运动数据)

    怎样关闭微信运动(怎样关闭微信运动数据)

  • 直播平台给主播限流的原因(直播平台给主播发工资交税了吗)

    直播平台给主播限流的原因(直播平台给主播发工资交税了吗)

  • 幸运字符psc是什么意思(幸运字符cap是什么意思)

    幸运字符psc是什么意思(幸运字符cap是什么意思)

  • miui12稳定版内测什么时候出来(miui12稳定版内测申请成功后怎么更新)

    miui12稳定版内测什么时候出来(miui12稳定版内测申请成功后怎么更新)

  • 计算器sin30怎么按(计算器上的sin30度怎么用)

    计算器sin30怎么按(计算器上的sin30度怎么用)

  • 鼠标和键盘插哪里(鼠标和键盘插哪个位置)

    鼠标和键盘插哪里(鼠标和键盘插哪个位置)

  • 移动wi-fi能连上却用不了是什么原因(移动wifi为什么可以连接不可以用)

    移动wi-fi能连上却用不了是什么原因(移动wifi为什么可以连接不可以用)

  • 小米mix2s支持20w快充吗(小米MIX2S支持aptX HD)

    小米mix2s支持20w快充吗(小米MIX2S支持aptX HD)

  • 拼多多店铺id如何查看(拼多多店铺id如何修改)

    拼多多店铺id如何查看(拼多多店铺id如何修改)

  • 飞猪儿童票怎么买步骤(飞猪儿童票怎么退)

    飞猪儿童票怎么买步骤(飞猪儿童票怎么退)

  • iphone11怎么设置指纹(iphone11怎么设置面容解锁)

    iphone11怎么设置指纹(iphone11怎么设置面容解锁)

  • iphone11和iphonex屏幕一样大吗(iphonex与iphone11屏幕哪个好)

    iphone11和iphonex屏幕一样大吗(iphonex与iphone11屏幕哪个好)

  • 荣耀8x充电功率(荣耀8x充电功率多大)

    荣耀8x充电功率(荣耀8x充电功率多大)

  • 小米充电双闪电什么意思(小米充电双闪变成单闪)

    小米充电双闪电什么意思(小米充电双闪变成单闪)

  • 如何恢复没有保存的ppt(如何恢复没有保存的文件)

    如何恢复没有保存的ppt(如何恢复没有保存的文件)

  • 怎么把空白页删除(怎么把空白页删掉wps手机)

    怎么把空白页删除(怎么把空白页删掉wps手机)

  • 钉钉抄送人是干嘛用的(钉钉抄送人应该选谁)

    钉钉抄送人是干嘛用的(钉钉抄送人应该选谁)

  • dlt-a0是什么手机(d00v是什么手机多少钱)

    dlt-a0是什么手机(d00v是什么手机多少钱)

  • 云集微店怎么开(云集微店开店流程图)

    云集微店怎么开(云集微店开店流程图)

  • 手机怎么合成照片(手机怎么合成照片四合一)

    手机怎么合成照片(手机怎么合成照片四合一)

  • ajax - 终结篇jsonp,防抖节流(ajax json请求)

    ajax - 终结篇jsonp,防抖节流(ajax json请求)

  • 帝国CMS怎么实现提交评论后自动重新生成内容页(帝国cms移动端)

    帝国CMS怎么实现提交评论后自动重新生成内容页(帝国cms移动端)

  • 劳务派遣公司企业所得税税率
  • 税务迁移麻烦吗
  • 电梯的税收筹划怎么做
  • 采用直接转销法会在一定程度上高估了应收款项
  • 积分兑换开始啦
  • 个人所得税累计收入
  • 金税盘没有报税管理怎么把发票明细怎么导出
  • 外包和离岸外包一样吗
  • 公司给员工报销话费怎么做账
  • 商贸公司营业执照范围
  • 停用的厂房折旧吗
  • 小规模纳税人转一般纳税人
  • 未加盖发票专用章的发票是不合规
  • 商铺租赁合同的用途怎么写
  • 工程设备租赁带什么手续
  • 主营业务收入计入什么明细账
  • 暂估入账估低了怎么办
  • 自己开发自己施工的建筑单位怎么样
  • 损益调整是什么科目
  • 小规模和一般纳税人的区别
  • 销项税没有进项税多
  • 预缴增值税预缴的城建税怎么申报
  • 农产品初加工免征企业所得税
  • 印花税记到哪个会计科目
  • 会计差错更正的准则依据
  • 销售费用中的运输费属于什么科目
  • 低值易耗品属于资产类
  • 企业筹建期发生的广告宣传费怎么抵减所得税
  • 小规模纳税人销售收入会计分录
  • 收到退回的保证金利息怎么入账
  • 委托代销委托方的账务处理
  • 用产品抵债的合同怎么写
  • php ftp功能
  • 旧设备换新设备会计分录
  • 伯里圣埃德蒙兹的人口
  • 第三方代收的款项是什么意思
  • 安装elipse教程
  • 百旺金赋开票系统客服电话
  • phpcms教程
  • 个人所得税申报流程图
  • mongodb查看数据库大小
  • 所得税费用是属于费用类吗
  • 企业变更法人的原因怎么写
  • 运输费抵扣进项税怎么算
  • mysql中游标的作用
  • 破产企业资产拍卖后,管理人仅办理产权登记未交付房屋
  • 关于预计净残值的计算题及答案
  • 交通运输服务包括程租
  • 收到保险公司赔偿款怎么入账
  • 企业为什么要转移用工风险什么意思
  • 公司垫付员工社保分录
  • 新开办的企业怎么做账
  • 短期借款不超过几年
  • 先开收据再打款
  • 长期股权投资利润调整加折旧
  • 进项发票已入账进项税,但是未抵扣怎么办
  • 个人开具发票需要税号吗?
  • 备用金没有发票,只有支付凭证
  • 可供分配利润是未分配利润吗
  • 政府会计资产处置损益
  • 发票邮寄到家
  • sqlserver获取当前年
  • win7自动变成win10
  • windows xp系
  • 浏览网页跳转
  • 海尔笔记本最新款
  • os x10.11el capitan beta4更新了什么?os x10.11el capitan beta4下载地址
  • xp开机提示explorer
  • mac命令行窗口怎么打开
  • cmd.exe是什么意思
  • lnmp一键安装包是什么
  • javascript抢票
  • Linux中scp命令获取远程文件的方法
  • shell编程怎么执行
  • shell脚本获取进程pid
  • vue3目录解析
  • android音频播放器
  • 熟悉的拼音
  • A级纳税人和一般纳税人区别
  • 广东税务微信公众号微办税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设