Vue源码解析（一）：初步了解Vue源码结构

Vue 是什么？

在每次初始化Vue，使用 $\color{red}{new Vue({...})}$ 时，不难发现Vue其实是一个类，通过层层追踪终于找到Vue被定义的地方：

// src / core / instance / index.js
function Vue(options) {
  ...
  this._init(options)
}

这就是Vue最初定义的地方，当执行 new Vue 时，内部会执行 this._init(options)，将初始化的参数传入。

Vue源码其实可以理解为一棵树，我们看之前最好要确定看什么功能，然后避开那些分叉逻辑，接下来从 new Vue() 开始解析，走完一整条从初始化、数据劫持、模板编译、到真实的DOM整个流程。

在Vue内部，_符号开头定义的变量是供内部私有使用的，而$符号开头定义的变量是供用户使用的，而用户自定义的变量不能以_和$开头，防止内部冲突。

接着看Vue实例创建：

// src / core / instance / index.js
import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'

function Vue(options) {
  ...
  this._init(options)
}

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

可以看到 Vue 是通过 ES5 构造函数创建，为什么不使用 ES6 class 类来创建呢？网上许多回答是：因为这样可以方便的把 Vue 的功能拆分到不同目录中去维护，将Vue构造函数传入这些方法中，来给Vue原型上扩展方法。但目前个人认为两种方式没有区别。

initMixin(Vue)：定义_init方法。
stateMixin(Vue)：定义数据相关的方法$set,$delete,$watch方法。
eventsMixin(Vue)：定义事件相关的方法$on，$once，$off，$emit。
lifecycleMixin(Vue)：定义_update，及生命周期相关的$forceUpdate和$destroy。
renderMixin(Vue)：定义$nextTick，_render将render函数转为vnode。

这些方法都是在各自的文件内维护的，从而让代码结构更加清晰易懂可维护。如this._init方法被定义在：

export function initMixin(Vue) {
  Vue.prototype._init = function(options) {
    ...当执行new Vue时，进行一系列初始化并挂载
  }
}

这些xxxMixin完成后，接着会定义一些全局的API：

export function initGlobalAPI(Vue) {
  Vue.set方法
  Vue.delete方法
  Vue.nextTick方法
  
  ...
  
  内置组件：
  keep-alive
  transition
  transition-group
  
  ...
  
  initUse(Vue)：Vue.use方法
  initMixin(Vue)：Vue.mixin方法
  initExtend(Vue)：Vue.extend方法
  initAssetRegisters(Vue)：Vue.component，Vue.directive，Vue.filter方法
}

可以看到Vue的设计架构是分层次的，最底层是一个ES5构造函数，再上层在原型上会定义一些_init、$watch、_render等这样的方法，再上层会在构造函数自身定义全局的一些API，如set、nextTick、use等(以上这些是不区分平台的核心代码)，接着是跨平台和服务端渲染(这些暂时不在讨论范围)及编译器。将这些属性方法都定义好了之后，最后会导出一个完整的构造函数给到用户使用，而new Vue就是启动的钥匙。

目录结构

|-- dist  打包后的vue版本
|-- flow  类型检测，3.0换了typeScript
|-- script  构建不同版本vue的相关配置
|-- src  源码
    |-- compiler  编译器
    |-- core  不区分平台的核心代码
        |-- components  通用的抽象组件
        |-- global-api  全局API
        |-- instance  实例的构造函数和原型方法
        |-- observer  数据响应式
        |-- util  常用的工具方法
        |-- vdom  虚拟dom相关
    |-- platforms  不同平台不同实现
    |-- server  服务端渲染
    |-- sfc  .vue单文件组件解析
    |-- shared  全局通用工具方法
|-- test 测试

flow：javaScript是弱类型语言，使用flow以定义类型和检测类型，增加代码的健壮性。
src/compiler：将template模板编译为render函数。
src/core：与平台无关通用的逻辑，可以运行在任何javaScript环境下，如web、Node.js、weex嵌入原生应用中。
src/platforms：针对web平台和weex平台分别的实现，并提供统一的API供调用。
src/observer：vue检测数据数据变化改变视图的代码实现。
src/vdom：将render函数转为vnode从而patch为真实dom以及diff算法的代码实现。
dist：存放着针对不同使用方式的不同的vue版本。

Vue 构建版本

vue使用的是rollup构建的，按照使用方式的不同，可以分为以下三类：

UMD：通过 <script> 标签直接在浏览器中使用
CommonJS：Node 的模块方式
ES Module：ES6的模块导入方式

在vue的内部是只认render函数的，我们来自己定义一个render函数

new Vue({
  data: {
    msg: 'hello Vue!'
  },
  render(h) {
    return h('span', this.msg);
  }
}).$mount('#app');

可能有人会纳闷了，既然只认render函数，同时我们开发好像从来并没有写过render函数，而是使用的template模板。这是因为有vue-loader，它会将我们在template内定义的内容编译为render函数，而这个编译就是区分完整版和运行时版本的关键所在，完整版就自带这个编译器，而运行时版本就没有，如下面这段代码如果是在运行时版本环境下就会报错了：

new Vue({
  data: {
    msg: 'hello Vue!'  
  },
  template: `<div>{{msg}}</div>`
})

vue-cli默认是使用运行时版本的，更改或覆盖脚手架内的默认配置，将其更改为完整版即可通过编译：'vue$': 'vue/dist/vue.esm.js'，推荐还是使用运行时版本

这里涉及到一个常被问到的面试题：

请问 runtime compiler 和 runtime-only 这两个版本的区别？

文件大小的区别，带编译的版本要比不带的版本文件要大6kb左右
编译时机不同：编译运行时版本会在运行时进行编译，性能会有一定损耗；运行时版本借助于 vue-loader 做的离线编译，运行速度更快。

原文：//www.greatytc.com/p/e22671aef726