Vue不刷新页面更新组件
router.go和router-view
使用Vue我们可以实现组件化开发，有些时候，数据只存在于某个组件上，当数据发生变化时，我们只希望更新这个组件而不是刷新整个页面。
但是不管是使用this.$router.go(0)还是通过在app.vue中重新加载组件，都没有预期的效果。前者会重新加载页面，后者虽然不会重新加载页面，但是会出现肉眼可见的页面空白，用户体验非常不好。
使用key属性
我们可以为要改变的标签设置一个key属性，key属性用于vue 元素渲染，每次渲染的时候会去拿这个key 值做对比，如果这一次的key 值和上一次的key值是不一样的才会重新渲染dom 元素，否则保持上一次的元素状态。
根据这个原理，我们可以给key绑定一个获取时间戳的变量，当我们需要更新组件的时候就让这个变量获取一次时间戳，这个时候，key就会检测到变量的变化然后重新生成DOM元素。
在下面的代码中，我们实现了组件的复用，div标签会根据this.$store.state.tab.type的值去渲染不同的组件，但是这个不是重点。我们为每个组件设置了一个:key，:key绑定在本地变量timer上，当我们在子组件中调用父组件中的handler函数，父组件的:key就会检测到timer变量的改变而去重新加载DOM元素，实现页面的数据刷新。
<div class="border">
<show-message :key="timer" v-if="this.$store.state.tab.type == 0"></show-message>
<release-message v-if="this.$store.state.tab.type == 1"></release-message>
<update-message :key="timer" v-if="this.$store.state.tab.type == 2"></update-message>
<reply-message :key="timer" v-if="this.$store.state.tab.type == 3"></reply-message>
</div>
<script>
export default {
data() {
return {
timer: '',
}
},
methods: {
// 刷新子组件
handler() {
this.timer = new Date().getTime();
},
}
}
</script>
子组件：
<script>
export default {
methods: {
// 刷新子组件
reply(id) {
this.$store.state.tab.type = 3;
// 调用父组件的方法
this.$parent.handler();
}
}
}
</script>
