从源码角度理解Vue父子组件生命周期函数执行顺序

2024-02-02 11:38:25

前言

Vue.js 作为一款优秀的MVVM框架，在前端开发领域广受欢迎。在Vue中，组件作为UI复用和代码组织的重要方式，其生命周期函数对于理解组件的创建、更新和销毁过程至关重要。

父子组件生命周期函数执行顺序

在父子组件中，生命周期函数的执行顺序可能会与直觉不符，这很容易让人困惑。为了理解其背后的逻辑，我们不妨从源码的角度进行分析。

源码分析

首先，让我们从Vue源码中的生命周期挂载函数mountComponent开始。在这个函数中，我们可以看到父子组件生命周期函数的执行顺序。

mountComponent: function (vm, el, hydrating) {
  vm.$el = el;
  if (!vm.$options.render) {
    vm.$options.render = createEmptyVNode;
  }
  callHook(vm, 'beforeMount');

  // 执行render函数，为组件创建虚拟节点
  var updateComponent;
  updateComponent = function () {
    vm._update(vm._render(), hydrating);
  };

  // 调用beforeUpdate钩子
  callHook(vm, 'beforeUpdate');

  nextTick(function () {
    vm._watcherList.forEach(function (watcher) {
      watcher.teardown();
    });

    updateComponent();

    callHook(vm, 'updated');
  });

  // 调用生命周期钩子activated
  if (vm._isMounted) {
    callHook(vm, 'activated');
  }

  vm._isMounted = true;
  // 调用生命周期钩子mounted
  callHook(vm, 'mounted');

  // 执行created钩子
  if (vm.$vnode == null) {
    vm._isMounted = false;
    callHook(vm, 'deactivated');
    vm._isDestroyed = true;
    callHook(vm, 'destroyed');
  }
}