vue之，组件重新加载刷新

因业务需要，笔者需要做一个vue组件定时刷新重新加载的效果。

以前做过一次，页面重新加载的效果，在app.vue内配置reload函数，在需要刷新的页面调用。但是使用这样的方式实现组件或者页面刷新，会有短暂的白屏现象。

经过查阅资料，我使用了dom元素绑定key值，通过改变key值的方式来实现了组件的重新加载效果。经实测，此方法可以规避页面出现短暂白屏的现象。

具体代码如下：

<template>
	<div class="main" :key='menukey'></div>
	
</template>
<script>
	export default {
     
		data(){
     
			return{
     
				menukey: 0,
				setDateTime: null
			}
		},
		mouted(){
     
			this.setDateTimeInterval()
		},
		methods:{
     
			// 设置定时器
			setDateTimeInterval(){
     
				this.setDateTime = setInterval(()=>{
     
					this.menukey ++
				}, 1000 * 60 * 3)
			},
			// 清除定时器
			destroyed(){
     
				clearInterval(this.setDateTime)
				this.setDateTime = null
			}
		}
	}
</script>

主要思路就是，通过改变dom元素的key值，来实现组件的重新加载。