本系列分析的Vue.js版本是: v2.2.6，可在vue-dev仓库的dist/vue.js找到源码。

1、整体结构

  2. (function (global, factory) {
  4. typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  6. typeof define === 'function' && define.amd ? define(factory) :
  8. (global.Vue = factory());
  10. }(this, (function () {主要源码部分 })));

在浏览器端执行等价于

  2. //这个factory就是传入的最后那个匿名函数,注意该匿名函数并没自执行
  4. window.Vue=factory()

匿名函数最终返回一个Vue$3构造函数，所以上面代码实际执行

  2. window.Vue=Vue$3;

来看下这个匿名函数，即factory执行期间做了哪些事（未指明的行数大部分都是工具类函数定义，在此省略，等调用到再看）

  • 261行 config对象

  • 451行 实现nextTick函数

  • 616-660 实现 Dep类

  • 721-948 实现Observer类

  • 1463-1533 实现initProxy类

  • 1560-1737 实现VNode类，虚拟DOM相关

  • 2461-2607 实现Watcher类

  • 3841 实现Vue$3类

  • 3848-3852 分别调用如下函数，作用是给Vue$3的原型添加一系列方法和属性：

  2. initMixin(Vue$3);
  4. stateMixin(Vue$3);
  6. eventsMixin(Vue$3);
  8. lifecycleMixin(Vue$3);
  10. renderMixin(Vue$3);

  • 4166 调用initGlobalAPI(Vue$3)，作用是给Vue$3添加静态方法和属性;

  • 7236-7237 调用如下函数，作用是添加平台特有的指令和组件

  2. extend(Vue$3.options.directives, platformDirectives);
  4. extend(Vue$3.options.components, platformComponents);
  • 接下来看这些函数执行期间对Vue$3做了什么事情（以下Vue$3作为参数传给Vue，所以是同一引用）

2、initMixin(Vue$3)

  2. Vue.prototype._init = function (options?: Object) {}

3、stateMixin(Vue$3)

  2. Vue.prototype.$data
  4. Vue.prototype.$set = set
  6. Vue.prototype.$delete = del
  8. Vue.prototype.$watch = function(){}

4、eventsMixin(Vue$3)

  2. Vue.prototype.$on = function (event: string, fn: Function): Component {}
  4. Vue.prototype.$once = function (event: string, fn: Function): Component {}
  6. Vue.prototype.$off = function (event?: string, fn?: Function): Component {}
  8. Vue.prototype.$emit = function (event: string): Component {}

5、lifecycleMixin(Vue$3)

  2. Vue.prototype._mount = function(){}
  4. Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {}
  6. Vue.prototype._updateFromParent = function(){}
  8. Vue.prototype.$forceUpdate = function () {}
  10. Vue.prototype.$destroy = function () {}

6、renderMixin(Vue$3)

  2. Vue.prototype.$nextTick = function (fn: Function) {}
  4. Vue.prototype._render = function (): VNode {}
  6. Vue.prototype._s = _toString
  8. Vue.prototype._v = createTextVNode
  10. Vue.prototype._n = toNumber
  12. Vue.prototype._e = createEmptyVNode
  14. Vue.prototype._q = looseEqual
  16. Vue.prototype._i = looseIndexOf
  18. Vue.prototype._m = function(){}
  20. Vue.prototype._o = function(){}
  22. Vue.prototype._f = function resolveFilter (id) {}
  24. Vue.prototype._l = function(){}
  26. Vue.prototype._t = function(){}
  28. Vue.prototype._b = function(){}
  30. Vue.prototype._k = function(){}

7、initGlobalAPI(Vue$3)

  2. Vue.config
  4. Vue.util = util
  6. Vue.set = set
  8. Vue.delete = del
  10. Vue.nextTick = util.nextTick
  12. Vue.options = {
  14. components: {
  16. KeepAlive
  18. },
  20. directives: {},
  22. filters: {},
  24. _base: Vue
  26. }
  28. Vue.use
  30. Vue.mixin
  32. Vue.cid = 0
  34. Vue.extend
  36. Vue.component = function(){}
  38. Vue.directive = function(){}
  40. Vue.filter = function(){}
  42. Vue.prototype.$isServer
  44. Vue.version = '__VERSION__'

8、extend()

  2. Vue.options = {
  4. components: {
  6. KeepAlive,
  8. Transition,
  10. TransitionGroup
  12. },
  14. directives: {
  16. model,
  18. show
  20. },
  22. filters: {},
  24. _base: Vue
  26. }

9、本节收获：

  • Vue自带指令只有2个：v-show,v-model；其他的如v-if属于程序编译时产生；
  • Vue自带组件只有3个：keep-alive，transition，transition-group；可以通过Vue.component动态添加；
  • Vue的初始化过程本质上是一个完善和丰富Vue类的过程，即给Vue及其原型添加一些属性和方法（API）

最后：可能有的人不太喜欢看构建后的源码，而喜欢看构建前的代码，这里推荐一篇写的比较好的对vue-dev构建过程以及整体结构分析都写的比较好的文章，本文也有部分参考，地址在这:

vue2源码构建过程分析