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

  • 小规模租金可以按1%
  • 过路费报销属于什么费用科目
  • 季度所得税可以零申报吗
  • 自来水开出发票的税率是多少
  • 已经验旧的发票可以作废吗
  • 小额存款账户管理费
  • 已上传的红字发票怎么打印
  • 职工集资建房款属公款吗
  • 文化传媒公司取名字不带文化
  • 汽车贷款利息是什么
  • 投资性房地产收入属于什么收入
  • 一次性奖励随工资发
  • 技术转让所得减半征收计算
  • 税务局代增值税普通发票流程
  • 个人两处以上所得经营所得怎么申报
  • 以旧翻新视频
  • 汇算清缴补交需要调报表吗
  • 没给顾客发票需要罚款吗
  • 广告费超标今年怎么处理
  • 声卡无声音怎么回事
  • 物业公司成本结转方案
  • office com组件修复
  • 累计折旧 减少
  • 在建工程明细科目分不开怎么办
  • PHP:Memcached::getDelayed()的用法_Memcached类
  • 房地产企业前期物业费可否税前扣除
  • 会计如何建账做账
  • 公司收到社保局的提醒函怎么办
  • 防伪税控服务费怎么交
  • PHP实现微信无感登陆
  • 稽查补缴所得税分录
  • 编写jsp程序,实现简易计算机
  • PHP Ajax JavaScript Json获取天气信息实现代码
  • echarts 官网
  • 委托加工物资如何做账
  • 货物入库会计分录怎么做
  • Windows上PostgreSQL安装配置教程
  • sqlserver四舍五入到整数
  • 企业投资股票收益怎么交税
  • 减值准备为什么不影响影响资产余额
  • 企业怎么开启承兑业务
  • 评估费用由谁承担
  • 购买研发设备的发票可以申报创新券吗?
  • 关联方交易的税收问题
  • 信用卡的还款方式怎么查
  • 转让股权收入属于收入总额吗
  • 已认证未申报抵扣怎么办
  • 进项税额不得从销项税额中抵扣项目是什么意思
  • 打官司收到对方的款,如何做账
  • 旧设备投资的账务处理
  • 为什么购入股票是综股
  • 金税盘显示已到锁死期
  • 固定资产一次性扣除账务处理
  • MySQL ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO) 的原因分解决办法
  • 如何搭建mybatis
  • mac怎么创建apple id
  • 如何知道自己的邮箱号
  • win7磁盘c满了怎么办却又分不清哪些是该删除
  • windows没有
  • 如何打开音量控制器
  • winxp如何设置自动关机
  • win10rs2是哪个版本
  • kpupgrader.exe是什么
  • url是什么文件怎么打开
  • perl中哈希如何赋值
  • js常用排序算法
  • jquery设置自定义属性
  • js闭包解决了什么问题
  • javascript 基础篇1 什么是js 建立第一个js程序
  • linux shell脚本实例
  • jquery dom对象
  • javascript总结笔记
  • 死循环代码
  • 个体逾期未申报一天会怎么样
  • 智云发票集中管理云平台官网
  • 银行与企业之间的信用
  • 长期挂账的其他应付款的规定
  • 工商财税小知识
  • 养猪环保局有什么新政策
  • 有限公司怎么交五险
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设