Vue不刷新页面更新组件

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>