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

  • 桌面上我的电脑图标怎么增加(桌面上我的电脑图标不见了)(电脑桌面上我的电脑)

    桌面上我的电脑图标怎么增加(桌面上我的电脑图标不见了)(电脑桌面上我的电脑)

  • 如何拍摄星轨效果好(如何拍摄星轨)(怎样拍摄星轨)

    如何拍摄星轨效果好(如何拍摄星轨)(怎样拍摄星轨)

  • 荣耀X30max怎么截屏(荣耀x30max怎么截屏)

    荣耀X30max怎么截屏(荣耀x30max怎么截屏)

  • 苹果13支持5g网络吗(ios13支持5g)

    苹果13支持5g网络吗(ios13支持5g)

  • 抖音语音直播怎么开(抖音语音直播怎么关播)

    抖音语音直播怎么开(抖音语音直播怎么关播)

  • win10桌面黑屏闪烁(win10桌面黑屏一闪一闪是什么情况)

    win10桌面黑屏闪烁(win10桌面黑屏一闪一闪是什么情况)

  • 电话无法拨通,请将电话更改为本机号码是什么意思(电话无法拨通应该怎么办)

    电话无法拨通,请将电话更改为本机号码是什么意思(电话无法拨通应该怎么办)

  • 电脑屏幕挤压白斑修复(电脑屏幕挤压白斑修复多少钱)

    电脑屏幕挤压白斑修复(电脑屏幕挤压白斑修复多少钱)

  • 苹果手机最上面一排不见了(苹果手机最上面的横槽是什么)

    苹果手机最上面一排不见了(苹果手机最上面的横槽是什么)

  • set administrator password什么意思(setadministratorpassword取消)

    set administrator password什么意思(setadministratorpassword取消)

  • 开飞行模式短信跑哪了(开飞行模式短信有声音哇)

    开飞行模式短信跑哪了(开飞行模式短信有声音哇)

  • 苹果x能升级13.3系统吗(苹果X能升级吗)

    苹果x能升级13.3系统吗(苹果X能升级吗)

  • 手机wifl信号差怎么办(手机wi-fi信号差怎么办)

    手机wifl信号差怎么办(手机wi-fi信号差怎么办)

  • oppor9m定时开关机在哪里(oppor9的定时关机在哪)

    oppor9m定时开关机在哪里(oppor9的定时关机在哪)

  • 电脑端订单回收站在哪里(电脑端订单回收站怎么删除)

    电脑端订单回收站在哪里(电脑端订单回收站怎么删除)

  • 小米arserver可以卸载吗(小米arserver是什么软件)

    小米arserver可以卸载吗(小米arserver是什么软件)

  • 淘宝卖家违规多久清零(淘宝卖家违规行为有哪些)

    淘宝卖家违规多久清零(淘宝卖家违规行为有哪些)

  • 如何设计ppt版式(怎样设计幻灯片的版式)

    如何设计ppt版式(怎样设计幻灯片的版式)

  • 怎样QQ绑定闺蜜情侣基友关系(怎么qq绑定闺蜜)

    怎样QQ绑定闺蜜情侣基友关系(怎么qq绑定闺蜜)

  • 微信收藏文件过大无法查看怎么办(微信收藏文件过大怎么打开)

    微信收藏文件过大无法查看怎么办(微信收藏文件过大怎么打开)

  • word单独一页去掉页眉(word去掉某一页)

    word单独一页去掉页眉(word去掉某一页)

  • 什么叫原生开发(原生开发小程序 什么意思)

    什么叫原生开发(原生开发小程序 什么意思)

  • 如何截取音乐(手机如何截取音乐)

    如何截取音乐(手机如何截取音乐)

  • 【微信小程序】初入微信小程序(微信小程序在哪里打开)

    【微信小程序】初入微信小程序(微信小程序在哪里打开)

  • 进口洋酒能存放多少年
  • 工业厂房房产税税率
  • 深圳增值税发票选择确认平台使用
  • 纳税筹划与企业决策
  • 双倍余额递减法如何计算
  • 土地使用费怎么申报
  • 挂失的存单还有记录吗
  • 包装成本为产品的百分比
  • 超额库存现金
  • 自产产品对外捐赠需要缴纳增值税吗
  • 抵税必须要有发票
  • 企业有哪些o
  • 公司个人所得税怎么申报
  • 清包工开票详细名称
  • 外币出资汇率变动会计处理
  • 已经销售但是没货怎么办
  • 我的初级备考经历怎么写
  • 以前年度记账错误
  • 全年累计申报个税怎么计算
  • 出差人什么意思
  • 先收到发票后到货分录
  • 财务报表未分配利润为负数
  • 财政拨付专项资金进什么会计科目
  • Win10新版21364发布: 可直接运行Linux图形程序
  • php面向对象实例
  • 广告公司广告费会计分录
  • 前端文件预览
  • 营改增后房租收入怎么交税
  • php有很多流行的mvc框架,这些框架可以
  • 行政事业单位会计科目一览表
  • php-xml
  • php获取当前网址
  • phpize安装
  • 发票多开了 财务怎么算税点
  • JavaScript ,18种常用数组方法,快来看看你会吗?
  • nlp自然语言处理框架
  • 对外长期投资会计分录?
  • 非货币性资产交换和债务重组的区别
  • 公司的车的停车费谁出
  • 属于长期险种的是
  • web cms漏洞
  • python中if语句的用法
  • mongodb视频教程
  • 已抵扣发票在什么地方查
  • 出售固定资产的损失计入什么科目
  • 进项税额不得从销项税额中抵扣是什么意思
  • 个人所得税专项扣除2023最新政策
  • mysql数据库优化配置
  • sql服务器无法启动的解决
  • sqlserver数据导入mysql
  • 待报解预算收入是什么
  • 土地增值税纳税申报期限
  • 发表文章开什么发票
  • 因管理不善材料被盗应记啥科目
  • 月末如何计提增值税附加及增值税
  • 物业公司收到维修基金会计分录
  • 利润总额是负数怎么计算利润率
  • 一个企业只有收入怎么办
  • 对公账户的流程
  • 收到红字增值税发票哪里查
  • 会计记账中借方和贷方
  • 公司折旧怎么算
  • mysql 5.7.11 zip安装配置方法图文教程
  • xp系统开机到window界面一直重启
  • 修改远程桌面端口命令是什么
  • fedora最新版
  • 复制粘贴报错
  • wave editor教程
  • linux里find命令
  • desl.exe是什么
  • win8.1安装应用商店
  • unity接入安卓sdk
  • Cocos2dx 疯狂跑酷(CrazyRun)游戏项目解析
  • node 进程
  • 批处理倒计时30秒内打开文件a,否则30秒后执行文件b
  • node.js ajax
  • js做运算
  • js实现类
  • 山东省工会经费收支管理办法
  • 土地增值税如何入账
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设