Vue进阶—new Vue()时发生了什么

---

一、前言

使用的vue版本是2.6.12

在项目中我们引入了Vue：import Vue from 'vue'。那么问题是vue到底从哪里来的？从node_modules中来。在node_modules路径下存在vue文件夹，vue文件夹中存在一个package.json文件。在这个文件中存在两个配置字段，它们都是程序的主入口文件。

"main": "dist/vue.runtime.common.js",
"module": "dist/vue.runtime.esm.js",

其中module的优先级大于main的优先级。在module不存在时，main对应的配置项就是主入口文件。可以看到 dist/vue.runtime.esm.js 才是主入口文件。

为了方便，我们还是去GitHub上下载vue的源代码到本地查看 https://github.com/vuejs/vue

下载完成后，我们在编辑器打开，它的目录结构如下：

其中Vue.js 的源码都在 src ⽬录下，源码的⽬录结构如下：

src 
├── compiler              # 编译相关 
├── core                  # 核⼼代码 
├── platforms             # 不同平台的⽀持 
├── server                # 服务端渲染 
├── sfc                   # .vue ⽂件解析 
├── shared                # 共享代码

二、过程解析

1、Vue构造函数

当 new Vue(options) 时调用的是 src/core/instance/index.js 文件中的Vue函数，源码如下：

function Vue (options) {
   
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
   
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}

当我们新建一个Vue实例时候，会判断如果当前的环境不是生产环境，并且如果在调用Vue的时候，没有用new操作符，就会调用warn函数，抛出一个警告，告诉你Vue是一个构造函数，需要用new操作符去调用。这个warn函数并不是单纯的console.warn。

接下来，把 options 作为参数调用 _init 方法。options 就是调用 new Vue时候传入的参数。可以看到Vue构造函数的核心代码只有一行：this._init(options)

在Vue构造函数后边，还有几句代码：

function Vue (options) {
   
  ...
}
initMixin(Vue<