vue组件什么时候会被销毁

Vue组件会在以下情况下被销毁：

1. 路由切换: 当组件作为路由的目标组件时，当页面跳转到其他路由时，当前组件会被销毁。

2. 条件渲染: 当使用v-if或v-show指令控制组件的显示与隐藏时，当条件不满足时，组件会被销毁。

3. 组件销毁: 当父组件通过v-if或v-for指令控制子组件的创建与销毁时，子组件会被销毁。

4. 组件销毁钩子函数: 当组件中的beforeDestroy钩子函数执行完成后，组件会被销毁。

5. 页面刷新或关闭: 当页面被刷新或关闭时，组件会被销毁。

需要注意的是，Vue组件的销毁并不是立即执行的，而是在一个合适的时机进行的。在组件销毁前，Vue会执行一系列的生命周期钩子函数，如beforeDestroy、destroyed等，这些钩子函数可以用来执行一些清理工作，如取消事件监听、清除定时器等。

Vue组件会在以下几种情况下被销毁：

1. 手动销毁：可以通过调用$destroy()方法来手动销毁Vue组件。这个方法会递归地销毁组件实例及其子组件，并触发beforeDestroy和destroyed生命周期钩子函数。

2. 路由切换：当路由发生切换时，原先的组件会被销毁，新的组件会被创建和渲染。这意味着，当你从一个路由切换到另一个路由时，之前的组件会被销毁。

3. 条件渲染：当通过条件指令（如v-if或v-show）从DOM中移除组件时，该组件会被销毁。当条件为false时，组件会被销毁并从DOM中移除。而当条件为true时，组件会被重新创建和渲染。

4. 父组件销毁：当一个组件实例的父组件被销毁时，该组件也会被销毁。这意味着，当一个组件从父组件中移除时，它会被销毁。这种情况下，会触发beforeDestroy和destroyed生命周期钩子函数。

5. v-for列表中的组件：当在一个v-for指令中使用组件时，如果列表的数据发生改变，那些被移除的组件会被销毁。同时，新的组件会根据新的数据重新创建和渲染。

需要注意的是，当一个Vue组件被销毁时，它的所有事件监听器和定时器会被自动移除，以及与之相关的所有资源也会被释放。销毁一个组件后，它将无法再触发任何生命周期钩子函数。

总之，Vue组件会在手动销毁、路由切换、条件渲染、父组件销毁以及v-for列表中的组件变动时被销毁。

Vue组件会在以下几种情况下被销毁：

1. 手动销毁：通过调用vm.$destroy()方法手动销毁组件。这个方法会解除组件与父组件的关系，并且触发beforeDestroy和destroyed生命周期钩子函数。

2. 父组件销毁：当组件所在的父组件被销毁时，子组件也会被销毁。这时会触发与销毁相关的生命周期钩子函数。

3. 条件渲染：当使用v-if或者v-show指令控制组件的条件渲染时，如果条件为false，组件会被销毁。

4. 路由切换：当使用Vue Router进行路由切换时，当前组件会被销毁。

5. 组件自身的销毁：组件可能会在自身的业务逻辑中触发销毁操作，比如完成某个任务后销毁自身。

无论是哪种情况，组件销毁时都会触发生命周期的beforeDestroy和destroyed钩子函数，可以在这两个钩子函数中进行一些清理工作，如取消订阅、清除定时器等。

下面是一个简单的示例，在组件销毁时清除定时器：

<template>
  <div>
    <p>{{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      timer: null
    }
  },
  created() {
    this.timer = setInterval(() => {
      this.count++
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

在上面的示例中，每隔一秒钟count值会自增，当组件被销毁时，使用clearInterval清除定时器，避免内存泄漏。