Vue源码系列讲解——生命周期篇【九】(销毁阶段)

最新推荐文章于 2025-06-04 23:40:15 发布

原创

最新推荐文章于 2025-06-04 23:40:15 发布 · 1.5k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #前端框架

1. 前言

接下来到了生命周期流程的最后一个阶段——销毁阶段。从官方文档给出的生命周期流程图中可以看到，当调用了vm.$destroy方法，Vue实例就进入了销毁阶段，该阶段所做的主要工作是将当前的Vue实例从其父级实例中删除，取消当前实例上的所有依赖追踪并且移除实例上的所有事件监听器。也就是说，当这个阶段完成之后，当前的Vue实例的整个生命流程就全部走完了，最终“寿终正寝”了。

本篇文章就来分析一下在销毁阶段都做了哪些工作。

2. 销毁阶段分析

上文说了，当调用了实例的$destroy方法之后，当前实例就进入了销毁阶段。所以分析销毁阶段就是分析$destroy方法的内部实现。该方法的定义位于源码的src/core/instance.lifecycle.js中，如下：

Vue.prototype.$destroy = function () {
  const vm: Component = this
  if (vm._isBeingDestroyed) {
    return
  }
  callHook(vm, 'beforeDestroy')
  vm._isBeingDestroyed = true
  // remove self from parent
  const parent = vm.$parent
  if (parent && !parent._isBeingDestroyed && !vm.$option