Vue源码学习系列02——Vue的初始化都做了什么

博客更新地址啦～，欢迎访问：https://jerryyuanj.github.io/blog

开始之前，我们先看看src目录的结构

目录结构

• compiler
  编译器
• core
  vue的核心部分，包含响应式原理、vdom，内部组件等
• platforms
  因为vue是跨平台的(web 与 weex)，在不同平台的编译、运行等行为有所不同，所以这里是给这两个平台量身定制的
• server
  服务端渲染相关
• sfc
  单文件组件的解析
• shared
  全局共享的工具函数(util.js)和常量(constants.js)

runtime-only版本与runtime-with-compiler版本的区别

参考官网：Vue完整版与编译版的区别 — Vue.js

补充一下，这段判断的代码位于：src/core/instance/lifecycle.js 中的 mountComponent 方法中，

if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
    vm.$options.el || el) {
   
    warn(
      'You are using the runtime-only build of Vue where the template ' +
      'compiler is not available. Either pre-compile the templates into ' +
      'render functions, or use the compiler-included build.',
      vm
    )
  }

通过判断条件我们可以大致的了解到，当传递 template 并且 template的第一个字符不是#号，或者 el 存在的时候，runtime-only 版本会报错，提示你需要使用带compiler的完整版。具体逻辑我们后面会说，这里先有个了解。

从入口文件开始

我们使用Vue的时候都是new一个Vue实例，很显然我们要找的入口就是Vue的构造函数。

Vue的构造函数位于 src/core/instance/index.js中，代码如下:

function Vue (options) {
   
  // 在非生产环境下, 如果不是使用new来调用这个构造器则会报警告
  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)
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

啰嗦一句，关于如何找到这个构造函数，如果你经常看源码，那么可以凭经验找到core/index.js中来，这里面从其他地方import了Vue，再顺着依赖找就可以直接定位到这个构造器了。但是标准方法应该是先看根目录下的/scripts/config.js，这里面包含着rollup打包的各项配置，随便找一个entry，再顺着依赖，就可以一步一步定位到Vue的构造器中。

Vue的构造函数非常简单，只执行了一句代码:

this._init(options)

这个_init()方法从哪来，我们后面会讲。

好了，今天的源码分析到此结束～～

hahahaha，开个玩笑，接下来才是正文。
我们看到这个文件中还有五个看上去就很厉害的方法。

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

为什么说呢，因为这就像数学题一样，往往字数越少的题目越难。OK，我们先来看看这五个函数吧。

initMinxin

位于: src/core/instance/init.js

这个函数中其实就定义了一个方法，所以这个initMixin实际上就做了一件事，就是在给Vue的原型添加了一个_init方法（对，就是Vue构造器里面的唯一的方法）：

export function initMixin (Vue: Class<Component>)