Vue源码分析(1)--源码组成结构分析

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

1、整体结构


(function (global, factory) {

typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :

typeof define === 'function' && define.amd ? define(factory) :

(global.Vue = factory());

}(this, (function () {主要源码部分 })));

在浏览器端执行等价于


//这个factory就是传入的最后那个匿名函数,注意该匿名函数并没自执行

window.Vue=factory()

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


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的原型添加一系列方法和属性:


initMixin(Vue$3);

stateMixin(Vue$3);

eventsMixin(Vue$3);

lifecycleMixin(Vue$3);

renderMixin(Vue$3);

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

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


extend(Vue$3.options.directives, platformDirectives);

extend(Vue$3.options.components, platformComponents);

  • 接下来看这些函数执行期间对Vue$3做了什么事情(以下Vue$3作为参数传给Vue,所以是同一引用)

2、initMixin(Vue$3)


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

3、stateMixin(Vue$3)


Vue.prototype.$data

Vue.prototype.$set = set

Vue.prototype.$delete = del

Vue.prototype.$watch = function(){}

4、eventsMixin(Vue$3)


Vue.prototype.$on = function (event: string, fn: Function): Component {}

Vue.prototype.$once = function (event: string, fn: Function): Component {}

Vue.prototype.$off = function (event?: string, fn?: Function): Component {}

Vue.prototype.$emit = function (event: string): Component {}

5、lifecycleMixin(Vue$3)


Vue.prototype._mount = function(){}

Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {}

Vue.prototype._updateFromParent = function(){}

Vue.prototype.$forceUpdate = function () {}

Vue.prototype.$destroy = function () {}

6、renderMixin(Vue$3)


Vue.prototype.$nextTick = function (fn: Function) {}

Vue.prototype._render = function (): VNode {}

Vue.prototype._s = _toString

Vue.prototype._v = createTextVNode

Vue.prototype._n = toNumber

Vue.prototype._e = createEmptyVNode

Vue.prototype._q = looseEqual

Vue.prototype._i = looseIndexOf

Vue.prototype._m = function(){}

Vue.prototype._o = function(){}

Vue.prototype._f = function resolveFilter (id) {}

Vue.prototype._l = function(){}

Vue.prototype._t = function(){}

Vue.prototype._b = function(){}

Vue.prototype._k = function(){}

7、initGlobalAPI(Vue$3)


Vue.config

Vue.util = util

Vue.set = set

Vue.delete = del

Vue.nextTick = util.nextTick

Vue.options = {

components: {

KeepAlive

},

directives: {},

filters: {},

_base: Vue

}

Vue.use

Vue.mixin

Vue.cid = 0

Vue.extend

Vue.component = function(){}

Vue.directive = function(){}

Vue.filter = function(){}

Vue.prototype.$isServer

Vue.version = '__VERSION__'

8、extend()


Vue.options = {

components: {

KeepAlive,

Transition,

TransitionGroup

},

directives: {

model,

show

},

filters: {},

_base: Vue

}

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源码构建过程分析

你可能感兴趣的:(Vue源码分析(1)--源码组成结构分析)