Vue 源码分析 - new Vue 的过程发生了什么 (🔥🔥超全解析详细到每一行!!!)


theme: channing-cyan highlight: androidstudio

文中讲解代码为 Vue 组合式 API 的最后一个版本 2.6.14 ~ 为了更好的理解,省略了部分代码,留下核心逻辑进行讲解。如需完整代码解释,可在代码库拉取完整代码,每一行均有完整注释,并在不断地完善中,我也会不断补充所有 Vue 源码中涉及到的逻辑;文章中有需要纠正的地方,欢迎大家指出,我们共同打造一份详细易懂的源码解析 ~

github代码地址:欢迎star🌟🌟🌟

gitee代码地址:欢迎star🌟🌟🌟

如果大家想要了解代码中提到的函数,可以评论区留言,我会补充对该函数的讲解!

我们通常在使用 Vue 的时候,都是通过以下方式:通过 new 关键字实例化 Vue 这个类,并传入相关的配置项,今天就来分析下 new Vue 的过程中,都做了哪些处理

new Vue({
  el: '#demo'
});

流程讲解

当我们调用 new Vue 后,Vue 的构造函数会调用 this._init 去进行 Vue 的初始化

// src\core\instance\index.js

function Vue (options) {

this._init(options)
}

而在 _init 方法中,主要做了以下几件事:

  1. 合并配置

  2. 初始化生命周期,初始化事件中心,初始化渲染函数

    初始化注入的内容(inject),触发生命周期函数 - beforeCreate

    初始化 propsdatamethodswatchcomputed 等选项

    初始化提供的内容(provide),触发生命周期函数 - create

  3. 对组件进行挂载

我们也观察到 beforeCreate 和 created 生命周期函数的调用分别是在 initState 前后,因此我们在 beforeCreate 的钩子函数中就不能获取到 data 、computed、props 等选项中中定义的值;但是同时 beforeCreate 和 created 生命周期函数的调用又是在组件挂载之前,因此,此时也不能访问 DOM

// src\core\instance\init.js

Vue.prototype._init = function (options) {
var vm = this;

vm.$options = mergeOptions( // 合并选项
resolveConstructorOptions(vm.constructor),
options || {},
vm
);

initLifecycle(vm); // 初始化生命周期
initEvents(vm); // 初始化事件中心
initRender(vm); // 初始化渲染函数
callHook(vm, ‘beforeCreate’); // 调用生命周期钩子函数 - beforeCreate
initInjections(vm); // 初始化注入的内容
initState(vm); // 初始化状态 (props, data, methods, watch, computed等选项)
initProvide(vm); // 初始化提供的内容
callHook(vm, ‘created’); // 调用生命周期钩子函数 - created

vm.$mount(vm.$options.el); // 挂载组件
};

总结

new Vue 的过程就是合并配置、初始化一写选项以及触发对应的生命周期,最后通过 vm.$mount 挂载组件,挂载的过程就是将模板处理为虚拟 DOM,最终渲染为真实 DOM,之后的文章将分析 Vue 的挂载过程


这是一个从 https://juejin.cn/post/7369089321410412555 下的原始话题分离的讨论话题