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

文中讲解代码为 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

   初始化 props、data、methods、watch、computed 等选项

   初始化提供的内容（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 的挂载过程