vue3销毁生命周期

Vue3中的销毁生命周期函数是`unmounted`，它在组件卸载之后被调用。在`unmounted`函数中，你可以执行一些清理工作，例如取消订阅、清除定时器、解绑事件等。下面是一个示例代码：

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script>
export default {
  // 组件创建时调用
  created() {
    // 订阅事件
    this.$bus.$on('event', this.handleEvent)
  },
  // 组件销毁时调用
  unmounted() {
    // 取消订阅
    this.$bus.$off('event', this.handleEvent)
  },
  methods: {
    handleEvent() {
      // 处理事件
    }
  }
}
</script>

相关问题

vue3 销毁生命周期

}
},
created() {
this.timer = setInterval(() => {
console.log('Hello World')
}, 1000)
监听器等等。因此，只有在Vue实例销毁之前调用this.destroyed()才会生效。

如果你在Vue实例销毁之后调 },
destroyed() {
clearInterval(this.timer)
}
}

在这个例子中，我们在created生命周期钩子函数中创建了一个定时器，每隔1秒钟输出一次'Hello World'。用this.destroyed()，那么它将不会生效，因为此时Vue实例已经被销毁了，这个钩子函数也就没有机会被调用了。其中，beforeUnmount是在组件卸载之前执行的，可以在这个阶段进行一些清理工作，例如清除定时

在组件销毁之前，我们在destroyed生命周期钩子函数中清除了这个定时器，以免造成内存泄漏。

器、取消订阅等。而unmounted则是在组件卸载之后执行的，此时组件已经完全销毁，可以进行一些最后的清理工作，

vue3销毁生命周期的使用

在Vue 3中，销毁生命周期钩子被移除了。取而代之的是使用`beforeUnmount`和`unmounted`两个新的生命周期钩子来处理组件销毁相关的逻辑。

`beforeUnmount`钩子函数在组件即将销毁之前被调用，可以用来执行一些清理工作，例如取消订阅、清除定时器等。你可以在组件的选项对象中定义该钩子函数，就像定义其他生命周期钩子一样。

export default {
  beforeUnmount() {
    // 在组件销毁之前执行清理工作
    // 取消订阅、清除定时器等
  },
};

`unmounted`钩子函数在组件已经销毁之后被调用，此时组件的所有属性和方法都不可访问。你可以在父组件中使用`v-if`或者`v-show`条件指令来控制组件的生命周期。

<template>
  <div>
    <child-component v-if="showChildComponent"></child-component>
    <button @click="destroyChildComponent">销毁子组件</button>
  </div>
</template>

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

export default {
  data() {
    return {
      showChildComponent: true,
    };
  },
  components: {
    ChildComponent,
  },
  methods: {
    destroyChildComponent() {
      this.showChildComponent = false;
    },
  },
};
</script>

这样，当点击"销毁子组件"按钮时，`unmounted`钩子函数会被调用，执行相关的清理工作。