当前位置: 首页 > news >正文

vue强制刷新的方法

前言 

在开发过程中,有时候会遇到这么一种情况:
1.切换页面页面没有更新
2.通过动态的赋值,但是dom没有及时更新,能够获取到动态赋的值,但是无法获取到双向绑定的dom节点,
这就需要我们手动进行强制刷新组件,下面这篇文章主要给大家介绍了关于vue组件强制刷新的方案,需要的朋友可以参考下 

  1. 刷新整个页面(最low的,可以借助router机制)
  2. 使用v-if标记(比较low的)
  3. provide和inject实现页面刷新
  4. 使用内置的forceUpdate方法(较好的)
  5. 使用key-changing优化组件(最好的)

location.reload();
this.$rotuer.go(0);

存在问题:

1.强制刷新页面,出现短暂的空白闪烁。

2.h5页面在安卓机方法不兼容。

  • this.$rotuer.go(0) 安卓、ios都不支持、pc支持
  • location.reload() 安卓不支持 、 ios支持、pc支持

一、强制全局刷新方法1- location.reload()

重新载入当前文档:location.reload();

定义和用法:

reload()方法用于刷新当前文档。

reload() 方法类似于你浏览器上的刷新页面按钮F5。

案例:

 点击修改按钮后,重新加载页面,让修改后的结果显示出来。

onSubmit() {...update(...).then(response => {if (response.success) {this.$message({message: response.msg,type: response.success});}setTimeout(() => {this.listLoading = false}, 1.5 * 1000)})location.reload()},

PS:如果使用getList()来刷新页面,有可能有时不会有刷新的效果。而用location.reload()方法是肯定会刷新的。

二、强制全局刷新方法2- this.$router.go(0)

经常使用vue的小伙伴看到这个应该很熟悉吧,我们经常用它来实现前进后退,但别忘了它还可以实现自身页面刷新

this.$router.go(0)

 对于以上两种方法,虽然都可以实现页面刷新,但页面会刷的白一下,给用户的体验非常不好。利用provide/inject组合方式是我目前觉得最好用的方法,而且可以实现局部刷新。下面我们就来详细介绍其用法

三、强制全局刷新方法3- this.$forceUpdate();

<template><div>xxx</div><el-button @click="refresh()">强制刷新</el-button>
</template>
<script>
export default {data() {return {}},methods: {refresh() {// forceUpdate只会强制更新页面,不会更新现有的计算属性。this.$forceUpdate();}}
}
</script>

四、强制局部刷新方法- provide inject和v-if

vue局部刷新

通过设置isReload来解决不刷新问题,原理就是通过 v-if 控制组件容器的出现与消失, 达到重新渲染的效果 , 从而实现我们的目的。

(1)、在父组件Layout.vue的子组件Content.vue 中定义全局方法reload()

注意:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。 

<template><section class="app-main"><transition name="fade-transform" mode="out-in"><router-view v-if="isReload1"/></transition></section>
</template><script>
export default {name: 'AppMain',data() {return {isReload1: true}},// 祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。provide() {return {reload1: this.reload1,};},methods: {reload1() {this.isReload1 = false;this.$nextTick(() => {this.isReload1 = true;});},}}
</script><style scoped>
.app-main {/*58 = navbar  */min-height: calc(100vh - 58px);position: relative;overflow: hidden;
}
</style>

在需要引入的子组件中引入

inject: ["reload1"]

然后在子组件调用此方法:

<template>
<div class="page"><button @click="reloadFun">刷新</button>
</div>
</template><script>
import Vue from 'vue';export default {inject:['reload'], // 使用 inject 注入 reload 变量 data(){return{}},methods: {reloadFun(){this.reload();  // 直接使用}},}
</script>

 这种方法比第一种方法的用户体验好一些。

五、使用 v-if

<template><div v-if="show">xxx</div><el-button @click="refresh()">强制刷新</el-button>
</template>
<script>
export default {data() {return {show: true}},methods: {refresh() {this.show = false;// this.$nextTick可实现在DOM 状态更新后,执行传入的方法。this.$nextTick(() => {this.show = true;});}}
}
</script>

六、使用key-changing优化组件

原理很简单,vue使用key标记组件身份,当key改变时就是释放原始组件,重新加载新的组件。 

<template><div :key="key>xxx</div><el-button @click="refresh()">强制刷新</el-button>
</template>
<script>
export default {data() {return {key: 1}},methods: {refresh() {this.key++;  // 或者 this.key= new Date().getTime();}}
}
</script>

http://www.lryc.cn/news/106006.html

相关文章:

  • Linux下TCP网络服务器与客户端通信程序入门
  • 第九章:SSM整合
  • shell脚本部署springboot
  • 每日一道面试题之Iterator 和 ListIterator 有什么区别?
  • 基于图像形态学处理的停车位检测matlab仿真
  • 【网络编程】同步IO/异步IO
  • 五分钟理解NIO与BIO
  • Python数据可视化工具——Pyecharts
  • cjson常用API使用总结
  • Shell脚本学习-case语句开发rsync服务的脚本
  • 使用docker部署一个jar项目
  • 【Linux命令200例】tee将输入内容输出到屏幕和文件
  • 使用Vue+CSS实现汉堡图标过渡为叉号图标,有点意思
  • python面试题【题目+答案】
  • Rocky(centos) jar 注册成服务,能开机自启动
  • 科大讯飞-鸟类分类挑战赛-测试【1】
  • 两行CSS让页面提升渲染性能
  • UniApp中tabbar设置了position: fixed以及bottom:0后出现一条缝隙,看到了后面的内容
  • 设计模式行为型——责任链模式
  • Xamarin.Android中Intent的使用
  • matplotlib绘制方波圆周分解动画
  • vue3+ts 实现枚举
  • 【Python】5分钟了解11个最佳的Python编译器和解释器
  • 如何安装、部署、启动Jenkins
  • sqlalchemy flask长时间未使用 导致数据库连接失效
  • Ubuntu 20.04 系统或图像界面卡死或完全无响应处理方法
  • Linux编辑器 - vim使用
  • 【Windows】磁盘快捷修复
  • Java 线程的多种状态
  • AI绘画| 迪士尼风格|可爱头像【附Midjourney提示词】