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

  • 电脑版微信可以发朋友圈吗(电脑版微信可以换头像吗)

    电脑版微信可以发朋友圈吗(电脑版微信可以换头像吗)

  • 华为荣耀20i支持双4g吗(华为荣耀20i支持鸿蒙系统吗)

    华为荣耀20i支持双4g吗(华为荣耀20i支持鸿蒙系统吗)

  • 苹果微信怎么调成深色模式(苹果微信怎么调成黑色)

    苹果微信怎么调成深色模式(苹果微信怎么调成黑色)

  • airpods完美支持安卓吗(airpods支持sbc吗)

    airpods完美支持安卓吗(airpods支持sbc吗)

  • 腾讯会议手机可以共享屏幕吗(腾讯会议手机可以开摄像头吗)

    腾讯会议手机可以共享屏幕吗(腾讯会议手机可以开摄像头吗)

  • 苹果手机视频发烫怎么回事(苹果手机视频发不出去是怎么回事)

    苹果手机视频发烫怎么回事(苹果手机视频发不出去是怎么回事)

  • 苹果x屏幕忽亮忽暗(苹果x为啥屏幕忽亮忽暗)

    苹果x屏幕忽亮忽暗(苹果x为啥屏幕忽亮忽暗)

  • win10word无法创建工作文件(word无法创建新文档onedrive)

    win10word无法创建工作文件(word无法创建新文档onedrive)

  • 苹果蓝牙耳机距离手机可以有多远(苹果蓝牙耳机距离短)

    苹果蓝牙耳机距离手机可以有多远(苹果蓝牙耳机距离短)

  • 快手发作品所在位置怎么改(快手发作品所在位置不是本地怎么消)

    快手发作品所在位置怎么改(快手发作品所在位置不是本地怎么消)

  • 华为畅享8怎么拆后盖(华为畅享8怎么样)

    华为畅享8怎么拆后盖(华为畅享8怎么样)

  • 什么手机可以投屏到墙上(什么手机可以投影)

    什么手机可以投屏到墙上(什么手机可以投影)

  • 华为增强信息对方收不到(华为增强信息对方没开通能收到信息吗)

    华为增强信息对方收不到(华为增强信息对方没开通能收到信息吗)

  • i3 7300配什么主板(i3-7300)

    i3 7300配什么主板(i3-7300)

  • 电脑主板带声卡吗(电脑主板带声卡和网卞吗)

    电脑主板带声卡吗(电脑主板带声卡和网卞吗)

  • 苹果11的访问限制在哪里(苹果11访问限制)

    苹果11的访问限制在哪里(苹果11访问限制)

  • 小米九什么时候更新miui11(小米九什么时候发布的)

    小米九什么时候更新miui11(小米九什么时候发布的)

  • 关机了怎么看未接电话(关机了怎么看未接短信)

    关机了怎么看未接电话(关机了怎么看未接短信)

  • word第二行怎么空两格(word第二行怎么空格)

    word第二行怎么空两格(word第二行怎么空格)

  • oppo手机出现绿条原因(oppo手机出现绿色方块模式怎么取消)

    oppo手机出现绿条原因(oppo手机出现绿色方块模式怎么取消)

  • 苹果手机发朋友圈怎么显示全文(苹果手机发朋友圈怎么显示手机型号)

    苹果手机发朋友圈怎么显示全文(苹果手机发朋友圈怎么显示手机型号)

  • 搜狗浏览器如何设置兼容模式(搜狗浏览器如何查看保存的密码)

    搜狗浏览器如何设置兼容模式(搜狗浏览器如何查看保存的密码)

  • 怎么关闭iPhone手机上的常去地点功能(怎么关闭iphone手机)

    怎么关闭iPhone手机上的常去地点功能(怎么关闭iphone手机)

  • HTML文档基本结构(html文档基本结构包括哪几部分)

    HTML文档基本结构(html文档基本结构包括哪几部分)

  • 个税退付手续费是单位所得吗
  • 中税协是什么意思
  • 职工福利按工资发放吗
  • 银行进账单票据号码在哪里
  • 利润表的所得税费用怎么填
  • 小规模申报增值税怎么申报
  • 残保金申报在哪申报
  • 淘宝买货没有发票
  • 电子税务局怎么登录
  • 不得抵扣的进项税额转出会计分录
  • 在建投资性物业管理办法
  • 发票大头小尾什么意思
  • 财产保全包括支付宝吗
  • 建筑业简易征收差额征税的计算案例
  • 以物易物方式销售货物例题
  • 建安企业预缴企业所得税税率
  • 一般纳税人净利润300万企业所得税怎么算
  • 增值税失控发票什么意思
  • 关于环保税税目正确的有
  • 降温费和取暖费标准
  • 专利技术使用权转让属于特许权使用费
  • 对外开具发票
  • 小规模计提缴纳增值税
  • win11资源管理器怎么打开
  • 库存现金盘亏会计分录原因待查
  • 库存现金盘亏处理前分录
  • 办理不动产证需要什么手续及证件
  • lsass.exe在哪个文件夹
  • 未签订租赁合同租金如何确定
  • 企业销售商品怎么做分录
  • 销售折扣属于什么项目
  • 报销办公用品会计分录计入其他应付还是其他应收
  • 出售生产设备的会计分录
  • yolov1 实现
  • 被黑客攻击
  • 应收帐款质保金
  • 原始凭证分割单样本图片
  • 帝国cms如何判断图片有没有被使用
  • mysql常见操作
  • 普票不能抵扣要他干嘛
  • MySQL里Create Index 能否创建主键 Primary Key
  • sqlserver模糊查询表名
  • 个税如果是公司怎么申报
  • 确认收入结转成本可以写在一张凭证上吗
  • 进项抵扣和销项抵扣
  • 公司从个人手中购买设备
  • 三证合一办理流程及费用
  • 一般纳税人进项票是普票可以抵扣吗
  • 无偿赠送他人产品,会计分录怎么写
  • 视同销售和不视同销售的区别?
  • 工程项目开发的一般流程
  • 公司车还车贷计入什么科目
  • 接待客人的场合
  • 3%税率专票为什么不能抵扣
  • 什么情况下增值税发票不能抵扣
  • 员工福利费怎么做账
  • 以前年度调增的收入下一年如何申报
  • sqlserver时间格式转换yyyy-mm
  • win8激活点不进去
  • centos7搭建nfs详细步骤
  • 注册表mime
  • mac wife
  • 怎么取消win10通知消息
  • 苹果mac系统怎么安装pip工具
  • mac的替换在哪里
  • ping命令详解步骤
  • 怎么处理人际关系
  • Linux中的stat命令使用简介
  • 详细测试就是全部测试
  • javascript create
  • 常见的css样式
  • opengl绘制点线面
  • javascript学习指南
  • js按位运算符
  • unity物体边缘发光
  • nodemoudles可以复制粘贴别的电脑运行程序吗
  • jquery点击按钮跳转页面
  • js基于什么
  • jquery点击方法
  • 广东省国家税务总局稽查局局长
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设