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

  • 如何写好软文标题 好的标题是靠这样想出来的(写软文标题的写作技巧有哪些?)

    如何写好软文标题 好的标题是靠这样想出来的(写软文标题的写作技巧有哪些?)

  • word文档字体16磅怎么设置(字体大小16磅)

    word文档字体16磅怎么设置(字体大小16磅)

  • 随申办的小红点如何消除(随申办的小红点的消息在哪里点)

    随申办的小红点如何消除(随申办的小红点的消息在哪里点)

  • 小米蓝牙耳机卡顿解决方法(小米蓝牙耳机卡顿)

    小米蓝牙耳机卡顿解决方法(小米蓝牙耳机卡顿)

  • iphonex快充多少w(iphonex快充用多少w的)

    iphonex快充多少w(iphonex快充用多少w的)

  • 5700和5700xt差距

    5700和5700xt差距

  • 抖音直播打字主播看不到(抖音直播打字主播看不到苹果手机)

    抖音直播打字主播看不到(抖音直播打字主播看不到苹果手机)

  • 三星手机连不上网是怎么回事(三星手机连不上网怎么办)

    三星手机连不上网是怎么回事(三星手机连不上网怎么办)

  • 抖音上获得的音浪有什么用啊(抖音获得的音浪在哪里可以看到)

    抖音上获得的音浪有什么用啊(抖音获得的音浪在哪里可以看到)

  • se2支持无线充电吗(se2支持无线充电功能吗)

    se2支持无线充电吗(se2支持无线充电功能吗)

  • 有什么软件可以把图片上的文字提取出来(有什么软件可以监控对方手机)

    有什么软件可以把图片上的文字提取出来(有什么软件可以监控对方手机)

  • 充电器接口接触不良怎么修理(充电器接口接触不良修多少钱)

    充电器接口接触不良怎么修理(充电器接口接触不良修多少钱)

  • 电脑开机后键盘鼠标没反应怎么办(电脑开机后键盘灯不亮怎么办)

    电脑开机后键盘鼠标没反应怎么办(电脑开机后键盘灯不亮怎么办)

  • 怎样让手机电量更持久(怎样让手机电量快速减少)

    怎样让手机电量更持久(怎样让手机电量快速减少)

  • mate30后盖是玻璃还是塑料(mate30后盖玻璃碎了能换电池吗)

    mate30后盖是玻璃还是塑料(mate30后盖玻璃碎了能换电池吗)

  • 微信消息显示在屏幕显示(微信消息显示在屏幕顶端)

    微信消息显示在屏幕显示(微信消息显示在屏幕顶端)

  • 手机话费能提现吗(手机话费能提现出来吗)

    手机话费能提现吗(手机话费能提现出来吗)

  • 荣耀v20怎么关闭后台程序(荣耀v20怎么关闭锁屏壁纸)

    荣耀v20怎么关闭后台程序(荣耀v20怎么关闭锁屏壁纸)

  • 苹果xr手机铃声为什么越来越小(苹果xr手机铃声响一声后小了)

    苹果xr手机铃声为什么越来越小(苹果xr手机铃声响一声后小了)

  • 快手直播在哪看人数(快手直播在哪看回放视频)

    快手直播在哪看人数(快手直播在哪看回放视频)

  • 怎么把优酷缓存的视频移到本地(怎么把优酷缓存的视频保存到相册)

    怎么把优酷缓存的视频移到本地(怎么把优酷缓存的视频保存到相册)

  • 淘宝已处理的评价是什么意思(淘宝已处理的评价怎么删除)

    淘宝已处理的评价是什么意思(淘宝已处理的评价怎么删除)

  • 全民k歌如何去掉小程序(全民k歌如何去水印)

    全民k歌如何去掉小程序(全民k歌如何去水印)

  • 荣耀20是屏幕指纹解锁吗(荣耀20屏幕指纹换屏)

    荣耀20是屏幕指纹解锁吗(荣耀20屏幕指纹换屏)

  • oppo微信禁止安装程序怎么办(oppo手机微信怎么解除限制安装应用)

    oppo微信禁止安装程序怎么办(oppo手机微信怎么解除限制安装应用)

  • vivoy97和z3i区别 (vivoy97和z3i外观区别)

    vivoy97和z3i区别 (vivoy97和z3i外观区别)

  • oppor11能开空调吗(oppo11能不能开空调)

    oppor11能开空调吗(oppo11能不能开空调)

  • Vue中 数据改变但未渲染的问题,页面中并没有自动更新,但是在控制台可以打印出来,常见解决方法(vue更改数据)

    Vue中 数据改变但未渲染的问题,页面中并没有自动更新,但是在控制台可以打印出来,常见解决方法(vue更改数据)

  • 增值税税率是怎么规定的
  • 增值税抵扣怎么取消
  • 城市基础设施配套费减免
  • 两处以上取得工资如何交社保
  • 差旅费哪些可以抵扣进项税
  • 劳务报酬自行申报时间
  • 国际货物运输免征所得税
  • 企业法人网上可以注销吗
  • 股权转让需要开董事会吗
  • 滞留票怎么做账务处理
  • 房地产中的存货是什么意思
  • 资产划转涉税解读
  • 销售折让会影响单价吗
  • 包装物押金是含税价格吗
  • 财务费用利息收入借方为负数是什么意思
  • 将资产货物用于业务宣传增值税
  • 私立医院整容效果都不行吗
  • 预付房租是否需要分摊处理呢?
  • 国税地税企业所得税划分
  • 企业所得税税前不得扣除的项目
  • 用户风险是什么意思
  • 物业公司怎么开发票
  • 税控盘登不上怎么回事
  • 总公司和分公司的合作协议
  • 免征增值税的税额还要交个人所得税吗
  • 个人财产转让所得在哪里申报
  • windows10开机如何换帐号
  • 文件类型错误请重新选择
  • 电脑无损音乐播放软件哪个最好
  • 交上年企业所得税怎么做会计分录
  • 收到服务费专票怎么做账
  • win11无限重启怎么解决
  • Windows11预览体验
  • php怎么获取单选框的值
  • 周转材料要计入增值税吗
  • 广告费增值税税目是什么
  • 二手房房屋买卖注意哪些问题
  • yii2关联查询
  • 一般纳税人企业所得税税率多少
  • 我国消费税的特点
  • 低代码开发开源
  • thinkphp i方法
  • vue3生命周期及使用
  • js中数组方法有哪些
  • 装修费摊销3年会计分录
  • 机械设备大修标准
  • 租赁合同印花税怎么申报缴纳
  • 新会计准则计提减值准备
  • 月底结转增值税凭证
  • 文化事业建设税是含税还是不含税
  • 工业企业土地使用税
  • 半成品可以计入企业产值吗
  • 无法收回的应收账款可以税前扣除吗
  • 结转本月完工产品成本会计分录怎么写
  • 境内企业借外债,不还会怎么样
  • 基金可以一次性全部卖出吗
  • 企业哪些部门
  • 查出以前年度的虚开发票,如何补税
  • 可以先抵扣下个月工资吗
  • 进项税额转出有余额怎么调整
  • 施工单位月末都需要结转什么
  • 没有认证的进项发票可以做成本吗
  • 加计扣除怎么申报
  • mysql获取当前行数
  • win7断电后无法启动
  • windows隐藏
  • ntdll.dll no matching
  • RHCE心得3 基于VSFTP的本地YUM源及光盘YUM源搭建步骤分享
  • java的gui框架
  • unity3D游戏开发
  • js数组随机抽奖
  • regedit.exe
  • javascript高级语言
  • node.js express koa
  • javascript前端开发案例教程课后答案
  • 初步了解的英文
  • jquery更换图片
  • 发票 报销期限
  • 卷票发票丢失怎么办理
  • 税务一般纳税人可以简易注销
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设