前端vue完全销毁一个组件的简单步骤

<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <MyComponent v-if="showComponent" />
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  data() {
    return {
      showComponent: true
    };
  },
  methods: {
    toggleComponent() {
      this.showComponent = !this.showComponent;
    }
  },
  components: {
    MyComponent
  }
};
</script>

// 动态创建并挂载组件
const ComponentClass = Vue.extend(MyComponent);
const instance = new ComponentClass().$mount();
document.body.appendChild(instance.$el);

// 销毁组件实例
instance.$destroy();

export default {
  data() {
    return {
      intervalId: null
    };
  },
  mounted() {
    this.intervalId = setInterval(() => {
      console.log('Doing something');
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
    window.removeEventListener('resize', this.onResize);
  },
  methods: {
    onResize() {
      // window resize logic
    }
  }
};