Vue源码分析(1)--源码组成结构分析
2017-07-08 本文已影响171人
风之化身呀
本系列分析的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构建过程以及整体结构分析都写的比较好的文章，本文也有部分参考，地址在这:
