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

  • 美团如何关注店铺(美团关注店铺怎么关注)

    美团如何关注店铺(美团关注店铺怎么关注)

  • oppo a92s支持5g吗(oppo a92s支持快充吗)

    oppo a92s支持5g吗(oppo a92s支持快充吗)

  • 手机128和256运行速度(手机128和256更流畅吗)

    手机128和256运行速度(手机128和256更流畅吗)

  • 钉钉打卡打不上什么原因(钉钉打卡打不上卡)

    钉钉打卡打不上什么原因(钉钉打卡打不上卡)

  • 快手极速版为什么金币不转了(快手极速版为什么总是自动下载软件)

    快手极速版为什么金币不转了(快手极速版为什么总是自动下载软件)

  • 华为hms有什么用(华为的hms是什么意思)

    华为hms有什么用(华为的hms是什么意思)

  • 访问限制初始密码多少(访问限制初始密码)

    访问限制初始密码多少(访问限制初始密码)

  • 手机qq设置单向好友(手机qq怎么设置单向好友吗)

    手机qq设置单向好友(手机qq怎么设置单向好友吗)

  • 手机掉帧是什么意思(手机掉帧是什么是手机问题)

    手机掉帧是什么意思(手机掉帧是什么是手机问题)

  • 小米笔记本风扇声音大(小米笔记本风扇转速怎么调节)

    小米笔记本风扇声音大(小米笔记本风扇转速怎么调节)

  • 充电宝的灯一直闪怎么回事(充电宝的灯一直亮着充不进去电)

    充电宝的灯一直闪怎么回事(充电宝的灯一直亮着充不进去电)

  • wpsreset按了怎么恢复(wpsreset按了怎么用手机调回)

    wpsreset按了怎么恢复(wpsreset按了怎么用手机调回)

  • 淘宝怎么关闭帮买(淘宝怎么关闭帮朋友支付)

    淘宝怎么关闭帮买(淘宝怎么关闭帮朋友支付)

  • 滴滴快车怎么往返收费(滴滴快车怎么转出租车)

    滴滴快车怎么往返收费(滴滴快车怎么转出租车)

  • 支付宝账号是什么(支付宝账号是什么号码别人要给我打钱)

    支付宝账号是什么(支付宝账号是什么号码别人要给我打钱)

  • 货拉拉退款到账时间(货拉拉显示退款成功,但却没有收到退款)

    货拉拉退款到账时间(货拉拉显示退款成功,但却没有收到退款)

  • 12123支付平台响应为空(12123支付平台响应异常)

    12123支付平台响应为空(12123支付平台响应异常)

  • soul申诉后多会能解封(soul申诉结果会发短信吗)

    soul申诉后多会能解封(soul申诉结果会发短信吗)

  • 华为p30pro步数设置(华为p30的步数怎么显示在屏幕上)

    华为p30pro步数设置(华为p30的步数怎么显示在屏幕上)

  • 手机色彩怎么才能恢复(手机色彩怎么才好看)

    手机色彩怎么才能恢复(手机色彩怎么才好看)

  • 苹果xs max通话录音怎么设置

    苹果xs max通话录音怎么设置

  • 电话转接什么意思(转接电话号码拨打什么)

    电话转接什么意思(转接电话号码拨打什么)

  • ppt每页时间怎么设置

    ppt每页时间怎么设置

  • win7桌面分屏设置(windows7分屏幕)

    win7桌面分屏设置(windows7分屏幕)

  • 光纤猫怎么设置(光纤猫怎么设置wifi)

    光纤猫怎么设置(光纤猫怎么设置wifi)

  • 装卸费属于什么费用
  • 社保怎么进行账单查询
  • 资产负债表里的应收账款怎么取数
  • 增值税专用发票怎么开
  • 小规模差额申报怎么申报
  • 公司筹建期间可以多久
  • 个体工商户免征税额度是多少
  • ktv发票可以入账吗
  • 外地建筑工程开票流程
  • 建筑企业会计科目分类及明细表
  • 支付给员工的讲课费税前列支怎么做?
  • 财务费用利息收入借方表示什么
  • 上期计提的费用是什么
  • 销售货物的运费增值税计入什么科目
  • 应收账款管理制度设计毕业设计
  • 银行利息回单怎么打印
  • 一年内到期的非流动负债包括哪些科目
  • 将自制的一批新产品用于对外投资,生产成本为300000
  • 买商铺返租金之套路
  • 公司注册核税后如何建账?
  • 租赁房产税如何征收的2019
  • 农村的生产经营是什么
  • 税收滞纳金可以税前扣除吗
  • 生产酒的税收是多少
  • 生产企业出口退税全部流程
  • 删除文件需要管理员权限无法添加怎么办
  • 个人开票给公司有什么风险
  • intelin
  • 总公司与分公司的账务处理
  • 拍卖获得收入个税
  • 固定资产更新改造支出资本化
  • win10开始菜单磁贴设置
  • 应交增值税的完整计算公式是什么
  • 外企借款投资利息高吗
  • ESP32-CAM AI THINKER 引脚排列:GPIO 用法说明
  • php 生成随机字符串
  • yii2前后端分离
  • jsp课程设计含源代码
  • 农产品加计扣除1%怎么计算和会计分录
  • 固定资产处置金额是什么意思
  • 织梦网站怎么改logo
  • 人力资源公司开票税目
  • 外企研发中心
  • 票据承兑和贴现是指
  • sql server如何删除
  • 股权分配和利润的关系
  • 企业所得税征收方式有哪些?
  • 增值税征收类型
  • 借方记录什么的增加
  • 折扣销售方式销售货物只要发票中有注明的折扣额
  • 付境外股东股利要交什么税
  • 计提工资的会计处理
  • 管理费用一般包含研发费用吗
  • 试运行成本会计分录
  • 企业改制后如何脱离原主管部门
  • 组建,加入或退出工会都是基于
  • mac移动硬盘不能拷贝
  • macos sierra怎么样
  • .ccc是什么文件
  • pe explorer
  • win7不能复制文件怎么办
  • ubuntudde 中文
  • macappstore下载软件一直要密码
  • win10无u盘装系统教程
  • linux中tail命令详解
  • win7设备管理器里面没有网络适配器
  • 常见的场景切换效果有哪些
  • easyui validatebox验证
  • node.js有什么作用
  • bat批处理命令大全
  • sequelize-cli
  • python多线程例子
  • javascript学到什么程度
  • javascript获取复选框的值
  • 河北省网上税务局电子税务局
  • 珠宝消费税怎么计算出来的
  • 纳税申报过了申报期未申报怎么办
  • 税务系统党支部工作法
  • 养猪场环保税
  • portal
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设