vue中beforeDestroy生命周期钩子

beforeDestroy 是 Vue 2 中的一个生命周期钩子，它在组件销毁之前立即调用，用于在组件被销毁前执行一些清理操作，比如清除定时器、取消订阅事件或终止网络请求等。

理解 beforeDestroy 钩子

• beforeDestroy：在组件实例销毁之前调用。在这个阶段，组件仍然完全可用（即，所有数据、计算属性、方法等仍然可访问），因此可以执行清理任务。

组件什么时候会被销毁？

1. 切换页面：

   • 单页应用 (SPA)：在 Vue 中，当你使用 Vue Router 切换路由时，如果新页面对应的组件和当前页面对应的组件不相同，那么当前页面的组件会被销毁，新页面的组件会被创建。这时 beforeDestroy 会被调用。
   • 嵌套组件：如果一个父组件被销毁，父组件下的所有子组件也会被销毁，此时这些子组件的 beforeDestroy 也会被调用。

2. 关闭整个站点：

   • 如果用户关闭浏览器或刷新页面，Vue 应用中的所有组件都会被销毁。但是，这种情况下，Vue 的 beforeDestroy 钩子可能不会被调用，因为浏览器可能会在清理这些资源之前已经关闭了运行环境。

3. 条件渲染 (v-if)：

   • 当通过 v-if 或类似指令条件性地渲染组件时，当条件变为 false 时，组件会被销毁，这时 beforeDestroy 也会被调用。

组件销毁时一定会调用 beforeDestroy 吗？

• Vue 正常的销毁流程：

  • 如果组件被 Vue 正常销毁，比如通过页面切换或条件渲染 (v-if) 的方式，那么 beforeDestroy 和 destroyed 钩子都会被调用。

• 非正常销毁：

  • 如果销毁是由于用户关闭浏览器或刷新页面，可能无法保证 beforeDestroy 被正确调用。在这种情况下，浏览器可能不会执行所有的清理工作，特别是异步操作。

典型使用场景

• 清理定时器：如果在组件中使用了 setInterval 或 setTimeout，在 beforeDestroy 中清理这些定时器以避免内存泄漏。
• 取消订阅事件：如果组件通过 addEventListener 订阅了全局事件，可以在 beforeDestroy 中取消订阅。
• 终止未完成的网络请求：在组件销毁前终止正在进行的网络请求。

export default {
  data() {
    return {
      intervalId: null,
    };
  },
  mounted() {
    this.intervalId = setInterval(() => {
      console.log("定时任务");
    }, 1000);
  },
  beforeDestroy() {
    if (this.intervalId) {
      clearInterval(this.intervalId); // 清理定时器
    }
    console.log("组件即将被销毁");
  }
};

总结

• 组件销毁：组件在被 Vue 销毁之前会调用 beforeDestroy 钩子，在这时你可以执行清理操作。
• 切换页面：在 Vue 单页应用中切换路由时，旧页面的组件会被销毁，此时 beforeDestroy 钩子会被调用。
• beforeDestroy 保证：在正常的 Vue 销毁流程中，beforeDestroy 一定会被调用，但在某些特殊情况下（如关闭浏览器）不能完全保证。

---

a. 了解 destroyed 钩子与 beforeDestroy 的区别和用途。

b. 了解 Vue 3 中的 onBeforeUnmount 和 onUnmounted 生命周期钩子。