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

  • 增值税电子发票可以作废吗
  • 其他收益里的政府补助免税吗
  • 企业结算时待摊费用怎么办
  • 增值税纳税申报表怎么填
  • 甲供材和清包工的账务处理
  • 个体工商户年度报告表怎么报
  • 专项申报的类别
  • 会计成本核算工作内容
  • 持有待售固定资产按照账面价值与可收回金额
  • 流动负债中的短期借款
  • 单位购置汽车如何入账
  • 购进货物的价税怎么算
  • 远程认证是什么意思
  • 员工离职赔偿计入什么科目
  • 借 其他应付款
  • 机打发票验旧是什么意思
  • 安置残疾人支付的工资
  • 核定征收的企业可以享受税收优惠吗
  • 研发费用申报表汇算清缴怎么填
  • 宿舍开店能开些啥
  • 企业取得的利息收入 用什么科目
  • 怎样查一个银行的行号
  • 健康助手在哪里找到
  • 已付货款没有发票能做支出吗
  • icons是什么文件夹
  • 社保缴费半年
  • 增值税专票开错了可以作废吗
  • 深入理解php内核
  • PHP:iconv_substr()的用法_iconv函数
  • 其他应收款超过一年是12个月吗?
  • 商品零售企业一般具有什么特征
  • 合作社分红怎么计算
  • 工装费用会计分录
  • 员工报销的话费要缴纳个税吗?
  • 怎样取消红字
  • php编译器与集成环境怎么安装
  • vue router怎么传值
  • 【Vue】踩坑日记:Scoped下动画无效,曾经以为百利而无一害的Scoped,也有自己的限制
  • python如何将字典中的键值互换
  • 垃圾处理费计提吗
  • 关于实收资本的表述中,不正确的是
  • 真发票假业务会坐牢吗
  • 现代服务增值税纳税义务发生时间
  • 帝国cms使用手册
  • 一般纳税人接受的下列服务中不得抵扣进项税额的有
  • 租金收入如何分析
  • 不能税前扣除的业务招待费怎么处理
  • 一般纳税人报税需要填哪些表
  • 企业开办期间账务处理
  • 托收承付和委托收款区别
  • 提供劳务收入包含什么
  • 残保金是第二年交前一年的吗
  • 抵押贷款评估费自己出吗
  • 股权转让的印花税税率是多少
  • 所得税汇算清缴需要调增的项目
  • 赠品当商品卖
  • 社保扣费不成功会再次扣费吗
  • 货款和发票金额不一致
  • 公司员工报销油费
  • 去年的物业费今年收到了可以确认收入吗
  • 公司增资需要哪些材料
  • mysql怎么取消密码
  • sql里面时间函数格式
  • 重装系统注册表会重置吗
  • 为什么总让升级浏览器
  • 索尼vpcea200c笔记本
  • 笔记本开机白屏进不了桌面
  • cnqmax.exe进程的详细注解 cnqmax进程是病毒吗 安全吗
  • centos7 ifcfg-lo
  • tkmc.exe
  • windows7桌面右击
  • linux配置ssh
  • win8.1备份系统还原
  • nodejs异步处理执行顺序
  • jquery移动端ui
  • jquery教程 csdn
  • JavaScript+html5 canvas绘制的小人效果
  • 进项发票的税收分类编码怎么查询
  • 养老专业在职研究生好吗
  • 河北耕地占用税最新规定
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设