vue强制刷新组件的3种方法

<template>
  <el-table
          :data="data"
          :key="refresh"
        >
        ...
  </el-table>
</template>
 
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
  
@Component({})
export default class extends Vue {
  refresh= true
  
  @Watch('data')
  watchData() {
    this.refresh= !this.refresh
  }
}
</script>

<template>
  <el-table
          v-if="refresh"
          :data="data"
        >
        ...
  </el-table>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
  
@Component({})
export default class extends Vue {
  refresh = true
  
  // 监视data是否发生变化
  @Watch('data')
  watchData() {
    // 移除组件
        this.refresh = false
        // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
        this.$nextTick(() => {
          // 重新渲染组件
            this.refresh = true
        })
  }
}
</script>

<template>
  <button @click="reflush()">刷新当前组件</button>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
  
@Component({})
export default class extends Vue {
  reflush() {
      this.$forceUpdate()
  }
}
</script>