关于vue组件的销毁与重载

最近遇上了一个难题，组件应该怎么销毁呢？翻阅了很多资料，总结出了几点。

1.使用:key

一定要在父组件写这个:key 不然就不会成功！！！！！  

2.v-if

v-if就是直接删除这个dom，而不是display:none，所以当v-if为true的时候进来回重新加载。

和上面的一样，是写在父组件里面！！

<template>
  <div class="home">
    <HeiHei v-if="heiKey"></HeiHei>
  </div>
</template>

<script>
import HeiHei from "@/components/HeiHei.vue";

export default {
  name: "TableTest",
  components: {
    HeiHei,
  },
  data() {
    return {
      heiKey: true,
    };
  },
  mounted() {},
  computed: {},
  methods: {
    change() {
      this.heiKey = false;
      this.$nextTick(() => {
        this.heiKey = true;
      });
    },
  },
};
</script>

写this.$nextTick是为了在dom更新之后再回调，这样就会重新加载咯～

3.this.$destory

需要在的这个生命周期函数中写this.$destroy

deactivated() {
    this.$destory(组件名称)
}

 然后在组件的destoryed写就行了。