强制刷新组件

使用 v-if 刷新

v-if 大家都懂，移除节点，重新渲染

<template>
  <comp v-if="update"></comp>
  <button @click="reload">刷新comp组件</button>
</template>
<script>
  import comp from '@/views/comp.vue'
  export default {
    name: 'parentComp',
    data() {
      return {
        update: true
      }
    },
    methods: {
      reload() {
        // 移除组件
        this.update = false
        // 在组件移除后，重新渲染组件
        // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
        this.$nextTick(() => {
          this.update = true
        })
      }
    }
  }
</script>

使用 this.$forceUpdate

比起用 v-if 。还得用 $nextTick 去更新，略显麻烦，可以使用 this.$forceUpdate()

<template>
  <button @click="reload">刷新当前组件</button>
</template>
<script>
  export default {
    name: 'comp',
    methods: {
      reload() {
        this.$forceUpdate()
      }
    }
  }
</script>