Vue原理解析（一）：Vue究竟是什么？

Vue，如今前端的当红炸子鸡，随着热度指数上升，实在是有必要从源码的角度，对它功能的实现原理一窥究竟。我的以为看源码主要是看两样东西，从宏观上来讲是它的设计思想和实现原理；微观上来讲就是编程技巧，也就是俗称的骚操做。咱们此次的侧重点是它的实现原理。好吧，让咱们推开它那神秘的大门，进入Vue的世界~

vue是什么？

vue到底是什么？为何就能实现这么多酷炫的功能，不知道你们有没有思考过这个问题。其实在每次初始化vue，使用new Vue({...})时，不难发现vue实际上是一个类。不过即便在ES6已经如此普及的今天，vue的定义倒是普通构造函数定义的，为何没有采用ES6的class呢？这个咱们稍后回答，经过层层追踪终于找到了vue被定义的地方：

function Vue(options) {
  ...
  this._init(options)
}
复制代码

由于是原理解析，flow的类型检测及一些边界状况，如使用方式不对或参数不对或不是主要逻辑的代码咱们就省略掉吧。好比省略号这里边界状况是使用时必须是new Vue()的形式，不然会报错。

其实vue源码就像一棵树，咱们看以前最好要肯定看什么功能，而后避开那些分叉逻辑，咱们接下来的目标就是以new Vue()开始，走完一整条从初始化、数据、模板到真实Dom的这整个流程。

这就是vue最初始被定义的地方，你没看错，就是这么简单。当执行new Vue时，内部会执行一个方法 this._init(options)，将初始化的参数传入。

这里须要说明一点，在vue的内部，_符号开头定义的变量是供内部私有使用的，而$ 符号定义的变量是供用户使用的，并且用户自定义的变量不能以_或$开头，以防止内部冲突。咱们接着看：

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)
复制代码

如今能够回答以前的问题了，为何不采用ES6的class来定义，由于这样能够方便的把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方法
}
复制代码

这里有部分API和xxxMixin定义的原型方法功能是相似或相同的，如this.$set和Vue.set他们都是使用set这样一个内部定义的方法。

这里须要提一下vue的架构设计，它的架构是分层式的。最底层是一个ES5的构造函数，再上层在原型上会定义一些_init、$watch、_render等这样的方法，再上层会在构造函数自身定义全局的一些API，如set、nextTick、use等(以上这些是不区分平台的核心代码)，接着是跨平台和服务端渲染(这些暂时不在讨论范围)及编译器。将这些属性方法都定义好了以后，最后会导出一个完整的构造函数给到用户使用，而new Vue就是启动的钥匙。这就是咱们陌生且又熟悉的vue，至于Vue.prototype._init内部作了啥？咱们下章节再说吧，由于还有不少其余的要补充。

目录结构

刚才是从比较微观的角度近距离的观察了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构建的，具体怎么构建的不重要，总之会构建出不少不一样版本的vue。按照使用方式的不一样，能够分为如下三类：

• UMD：经过<script>标签直接在浏览器中使用。
• CommonJS：使用比较旧的打包工具使用，如webpack1。
• ES Module：配合现代打包工具使用，如webpack2及以上。

而每一个使用方式内又分为了完整版和运行时版本，这里主要以ES Module为例，有了官方脚手架其余两类应该没多少人用了。再说明这两个版本的区别以前，抱歉我又要补充点其余的。在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和runtime-only这两个版本的区别？

怼回去：

• 主要是两点不一样：

1. 最明显的就是大小的区别，带编译器会比不带的版本大6kb。
2. 编译的时机不一样，编译器是运行时编译，性能会有必定的损耗；运行时版本是借助loader作的离线编译，运行性能更高。

下一篇：Vue原理解析（二）：快速搞懂new Vue()时到底作了什么？（上）

顺手点个赞或关注呗，找起来也方便~

参考：

Vue.js源码全方位深刻解析

Vue.js深刻浅出

Vue.js组件精讲

剖析 Vue.js 内部运行机制