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

<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>

data() {
    return {
      random: new Date().valueOf(),
      activeTab: 0,
      list: []
    };
}
watch: {
    activeTab: {
      handler(val) {
        this.random = new Date().valueOf()
        // 请求list
        this.getList()
      },
    },
}
methods: {
    getList() {
        const random = this.random
        api().then((list) => {
            // 判断处理数据时的tab是不是没变过
            if (this.random != random) return
            this.list = this.list.concat(list)
        })
    }
}