前言
在开发过程中,有时候会遇到这么一种情况：
1.切换页面页面没有更新
2.通过动态的赋值,但是dom没有及时更新,能够获取到动态赋的值,但是无法获取到双向绑定的dom节点,
这就需要我们手动进行强制刷新组件,下面这篇文章主要给大家介绍了关于vue组件强制刷新的方案,需要的朋友可以参考下
- 刷新整个页面（最low的，可以借助router机制）
- 使用v-if标记（比较low的）
- provide和inject实现页面刷新
- 使用内置的forceUpdate方法（较好的）
- 使用key-changing优化组件（最好的）
- nextTick配合v-if
location.reload();
this.$rotuer.go(0);存在问题：
1.强制刷新页面，出现短暂的空白闪烁。
2.h5页面在安卓机方法不兼容。
- this.$rotuer.go(0) 安卓、ios都不支持、pc支持
- location.reload() 安卓不支持 、 ios支持、pc支持
vue组件会在什么时候下被销毁?
1.页面关闭
2.路由跳转
3.v-if为false
4.改变key值
一、强制全局刷新方法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（nextTick配合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>
