在开发过程中,有时候会遇到这么一种情况:
1.切换页面页面没有更新
2.通过动态的赋值,但是dom没有及时更新,能够获取到动态赋的值,但是无法获取到双向绑定的dom节点,
这就需要我们手动进行强制刷新组件,下面这篇文章主要给大家介绍了关于vue组件强制刷新的方案,需要的朋友可以参考下
刷新整个页面(最low的,可以借助router机制)
使用v-if标记(比较low的)
provide和inject实现页面刷新
使用内置的forceUpdate方法(较好的)
使用key-changing优化组件(最好的)
location.reload();
this.$rotuer.go(0);
存在问题:
1.强制刷新页面,出现短暂的空白闪烁。
2.h5页面在安卓机方法不兼容。
this.$rotuer.go(0) 安卓、ios都不支持、pc支持
location.reload() 安卓不支持 、 ios支持、pc支持
重新载入当前文档: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()方法是肯定会刷新的。
经常使用vue的小伙伴看到这个应该很熟悉吧,我们经常用它来实现前进后退,但别忘了它还可以实现自身页面刷新
this.$router.go(0)
对于以上两种方法,虽然都可以实现页面刷新,但页面会刷的白一下,给用户的体验非常不好。利用provide/inject组合方式是我目前觉得最好用的方法,而且可以实现局部刷新。下面我们就来详细介绍其用法
<template> <div>xxx</div> <el-button @click="refresh()">强制刷新</el-button> </template> <script> export default { data() { return {} }, methods: { refresh() { // forceUpdate只会强制更新页面,不会更新现有的计算属性。 this.$forceUpdate(); } } } </script>
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>
这种方法比第一种方法的用户体验好一些。
<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>
原理很简单,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>
最新留言