返回

从Vue源码角度探索Vue2.x的生命周期

前端

许多人一开始学习Vue生命周期时，都会进行总结和学习。很高兴看到大家对Vue框架的热情。现在，我们就一起来深入探讨Vue2.x的生命周期，尤其是初始化阶段，帮助你更好地理解Vue框架是如何运作的。

Vue的生命周期概述

在开始详细探讨之前，我们先来回顾一下Vue的生命周期。Vue的生命周期可以分为四个阶段：初始化、编译、挂载和销毁。每个阶段都有自己的钩子函数，用于执行特定的操作。

初始化阶段

初始化阶段是Vue生命周期的第一个阶段。在这个阶段，Vue将进行以下操作：

  1. 创建Vue实例 ：首先，Vue会创建一个Vue实例，实例将成为整个组件树的根节点。
  2. 合并选项 ：Vue实例创建之后，会将用户提供的选项与默认选项进行合并，形成最终的选项对象。
  3. 初始化生命周期钩子 ：Vue会为实例初始化所有生命周期钩子函数，这些函数将在生命周期的不同阶段被调用。
  4. 调用_init()方法 ：Vue会调用_init()方法来完成实例的初始化工作。在这个方法中，Vue会完成以下操作：
    • 解析并合并选项
    • 初始化数据
    • 初始化计算属性
    • 初始化侦听器
    • 初始化方法
  5. 调用$mount()方法 ：Vue会调用$mount()方法来将实例挂载到DOM元素上。在这个方法中，Vue会完成以下操作：
    • 创建虚拟DOM
    • 将虚拟DOM渲染到DOM元素上
    • 调用mounted()钩子函数

从源码看初始化阶段

为了更深入地理解初始化阶段，我们来看看Vue源码中是如何实现的。

创建Vue实例

Vue实例的创建在src/core/instance/index.js文件中完成。当我们调用new Vue()时，就会创建一个Vue实例。

export function initMixin (Vue: Class<Component>) {
  Vue.prototype._init = function (options?: Object) {
    // 省略代码
  }
}

合并选项

选项的合并工作在src/core/util/options.js文件中完成。当我们调用Vue.prototype._init时，会将用户提供的选项与默认选项进行合并，形成最终的选项对象。

export function mergeOptions (
  parent: Object,
  child: Object,
  vm?: Component
): Options {
  // 省略代码
}

初始化生命周期钩子

生命周期钩子的初始化工作在src/core/instance/lifecycle.js文件中完成。当我们调用Vue.prototype._init时，会为实例初始化所有生命周期钩子函数，这些函数将在生命周期的不同阶段被调用。

const hooksToMerge = ['beforeCreate', 'created', 'beforeMount', 'mounted', 'beforeUpdate', 'updated', 'beforeDestroy', 'destroyed', 'activated', 'deactivated', 'errorCaptured']

调用_init()方法

_init()方法的调用在src/core/instance/index.js文件中完成。当我们调用Vue.prototype._init时，会调用_init()方法来完成实例的初始化工作。

export function initMixin (Vue: Class<Component>) {
  Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
    // 省略代码
  }
}

调用$mount()方法

$mount()方法的调用在src/core/instance/index.js文件中完成。当我们调用Vue.prototype.$mount时，会调用$mount()方法来将实例挂载到DOM元素上。

export function mountComponent (
  vm: Component,
  el: Element | string,
  hydrating?: boolean
): Component {
  // 省略代码
}

总结

通过对Vue源码的分析，我们对Vue2.x的生命周期有了更深入的了解，尤其是初始化阶段。希望这篇文章能对你有所帮助。如果你有任何疑问或建议，欢迎在评论区留言。