beforeDestroy在Vue2生命周期里处于啥阶段？

terry 6小时前阅读数 10 #Vue

刚接触Vue2的同学,大概率会对生命周期钩子有点懵，尤其是beforeDestroy——这东西到底啥时候用？用的时候要注意啥？别慌，这篇文章把beforeDestroy从“是啥”到“咋用”再到“避坑”一次性讲透，哪怕你是刚入门的小白，看完也能搞明白～

Vue2的组件从创建到销毁,有一整套“生命周期”流程，像大家熟悉的created（数据观测完、方法能调用但DOM没挂载）、mounted（DOM挂载完成）这些属于创建/挂载阶段，而beforeDestroy和destroyed属于销毁阶段。

beforeDestroy的触发时机很关键：当你主动调用$destroy()方法，或者路由切换导致组件被卸载时，Vue会先执行beforeDestroy钩子，这时候组件实例还没真正销毁，data里的数据、methods里的方法都能正常访问，页面上的DOM也还在（还没被移除），简单说，销毁前的最后一个可操作时机”。

beforeDestroy能解决哪些实际开发痛点？

很多时候,组件用了外部资源（比如定时器、事件监听），如果不主动清理，组件销毁后这些资源还留在内存里，时间久了就会内存泄漏，页面越来越卡。beforeDestroy就是专门用来“善后”的，常见场景有这几类：

清除定时器（setInterval/setTimeout）

比如做一个“倒计时组件”，在created里启动定时器：

export default {
  data() {
    return { count: 60 }
  },
  created() {
    this.timer = setInterval(() => {
      this.count--;
      if (this.count <= 0) clearInterval(this.timer);
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer); // 组件销毁前，把定时器清掉
  }
}

要是没在beforeDestroy里清定时器，组件被销毁后，定时器还在疯狂执行this.count--，但此时组件都没了，this指向也乱了，不仅浪费性能，还可能报错。

取消全局事件监听

比如给window绑定resize事件，监听窗口变化：

mounted() {
  window.addEventListener('resize', this.handleResize);
},
methods: {
  handleResize() {
    // 处理窗口变化逻辑
  }
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
}

组件销毁后,要是没移除事件监听，window触发resize时，还会执行handleResize，但这时候组件可能已经被卸载了，this对应的实例不存在，大概率报错。

清理自定义指令/第三方库的绑定

比如用了自定义指令做“点击空白处关闭弹窗”，或者用了像echarts这样的第三方库，以echarts为例，组件销毁前得把图表实例销毁：

mounted() {
  this.chart = echarts.init(this.$refs.chartDom);
},
beforeDestroy() {
  this.chart.dispose(); // 销毁echarts实例，释放内存
}

要是不 dispose，echarts实例会一直占着DOM和内存，下次再渲染新图表时，旧实例还在，容易冲突或内存爆炸。

订阅-发布模式的“退订”

如果用了EventBus（事件总线）做组件通信，在beforeDestroy里得把订阅的事件取消：

mounted() {
  this.$bus.$on('someEvent', this.handleEvent);
},
beforeDestroy() {
  this.$bus.$off('someEvent', this.handleEvent);
}

不然EventBus里的事件订阅还在,其他组件触发someEvent时，销毁后的组件方法可能还会被调用，引发不可控问题。

和destroyed钩子有啥区别？为啥选beforeDestroy做清理？

Vue2的销毁阶段有两个钩子：beforeDestroy和destroyed，区别在于：

beforeDestroy：组件“即将销毁但还没销毁”，此时实例还完整，能访问data、methods，DOM也还在页面上。
destroyed：组件“已经销毁”，实例被拆解，data和methods基本不可用（访问会报错），DOM也从页面中移除了。

所以资源清理必须放在beforeDestroy里——因为destroyed阶段，你想清理的资源（比如定时器、事件监听）可能已经找不到了，举个反例：如果把“清除定时器”写在destroyed里，这时候this.timer可能已经被Vue回收了，clearInterval(this.timer)根本执行不到，定时器就永远留在内存里了。

使用beforeDestroy时，这些坑要避开！

知道了作用和场景,还要注意写法，不然很容易踩坑：

坑1：在beforeDestroy里写异步操作

比如想“等1秒再清理资源”，写成这样：

beforeDestroy() {
  setTimeout(() => {
    clearInterval(this.timer); // 危险！
  }, 1000);
}

问题在于：beforeDestroy执行完后，组件就会进入destroyed阶段，实例被销毁，而setTimeout是异步的，1秒后回调执行时，this可能已经不是原来的组件实例了，this.timer也拿不到，定时器根本清不掉。

正确做法：beforeDestroy里只做同步清理，别搞异步。

坑2：漏清理多个资源

比如组件里同时用了定时器、window事件、EventBus订阅，结果只清了定时器，其他没管：

beforeDestroy() {
  clearInterval(this.timer); // 只清了定时器，其他没管
}

剩下的window事件、EventBus订阅还在内存里，时间久了必内存泄漏。

正确做法：把所有要清理的资源，都列在beforeDestroy里，逐个处理，可以加注释提醒自己：

beforeDestroy() {
  // 1. 清定时器
  clearInterval(this.timer);
  // 2. 清window事件
  window.removeEventListener('resize', this.handleResize);
  // 3. 清EventBus订阅
  this.$bus.$off('someEvent', this.handleEvent);
}

坑3：误把“数据更新”当清理逻辑

有人会在beforeDestroy里修改data，

beforeDestroy() {
  this.count = 0; // 没必要！
}

组件都要销毁了,修改数据完全没意义，还浪费性能。beforeDestroy只用来做“清理外部资源”，别干多余的事。

实际项目里，怎么规划beforeDestroy的逻辑？

团队开发时,组件逻辑复杂，beforeDestroy的清理逻辑很容易乱，分享个实用思路：

开发前先梳理“外部依赖”：组件里用了哪些定时器？绑了哪些window事件？用了哪些第三方库？有没有EventBus订阅？把这些列出来，就是要清理的清单。
写代码时，“创建”和“销毁”配对写：比如在mounted里写了window.addEventListener，立刻在beforeDestroy里写removeEventListener；在created里写了setInterval，立刻在beforeDestroy里写clearInterval，别等组件写完了再回头补，容易漏。

加注释说明清理逻辑：尤其是团队协作时，别人看你代码能快速明白“这里为啥要清”。

beforeDestroy() {
// 清理：倒计时定时器（防止组件销毁后定时器继续运行）
clearInterval(this.timer);
// 清理：窗口resize事件（防止全局事件残留）
window.removeEventListener('resize', this.handleResize);
}

复杂场景用“函数封装”：如果清理逻辑特别多，可以把清理逻辑封装成一个方法，比如cleanupResources，然后在beforeDestroy里调用：
```
methods: {
cleanupResources() {
 clearInterval(this.timer);
 window.removeEventListener('resize', this.handleResize);
 this.chart.dispose();
}
},
beforeDestroy() {
this.cleanupResources();
}
```
这样代码更整洁,也方便后续维护。