本系列分析的Vue.js版本是: v2.2.6泄伪，可在vue-dev倉庫的dist/vue.js找到源碼初嘹。
1刨晴、整體結(jié)構(gòu)
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global.Vue = factory());
}(this, (function () {主要源碼部分 })));
在瀏覽器端執(zhí)行等價于
//這個factory就是傳入的最后那個匿名函數(shù),注意該匿名函數(shù)并沒自執(zhí)行
window.Vue=factory()
匿名函數(shù)最終返回一個Vue$3構(gòu)造函數(shù)，所以上面代碼實(shí)際執(zhí)行
window.Vue=Vue$3;
來看下這個匿名函數(shù)蓬抄，即factory執(zhí)行期間做了哪些事（未指明的行數(shù)大部分都是工具類函數(shù)定義，在此省略夯到，等調(diào)用到再看）
261行 config對象
451行 實(shí)現(xiàn)nextTick函數(shù)
616-660 實(shí)現(xiàn) Dep類
721-948 實(shí)現(xiàn)Observer類
1463-1533 實(shí)現(xiàn)initProxy類
1560-1737 實(shí)現(xiàn)VNode類嚷缭，虛擬DOM相關(guān)
2461-2607 實(shí)現(xiàn)Watcher類
3841 實(shí)現(xiàn)Vue$3類
3848-3852 分別調(diào)用如下函數(shù)，作用是給Vue$3的原型添加一系列方法和屬性：
initMixin(Vue$3);
stateMixin(Vue$3);
eventsMixin(Vue$3);
lifecycleMixin(Vue$3);
renderMixin(Vue$3);
4166 調(diào)用initGlobalAPI(Vue$3)黄娘，作用是給Vue$3添加靜態(tài)方法和屬性;
7236-7237 調(diào)用如下函數(shù)峭状，作用是添加平臺特有的指令和組件
extend(Vue$3.options.directives, platformDirectives);
extend(Vue$3.options.components, platformComponents);
- 接下來看這些函數(shù)執(zhí)行期間對Vue$3做了什么事情（以下Vue$3作為參數(shù)傳給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移层、本節(jié)收獲：
- Vue自帶指令只有2個：v-show,v-model；其他的如v-if屬于程序編譯時產(chǎn)生赫粥；
- Vue自帶組件只有3個：keep-alive观话，transition，transition-group越平；可以通過Vue.component動態(tài)添加频蛔；
- Vue的初始化過程本質(zhì)上是一個完善和豐富Vue類的過程，即給Vue及其原型添加一些屬性和方法（API）
最后：可能有的人不太喜歡看構(gòu)建后的源碼秦叛，而喜歡看構(gòu)建前的代碼晦溪，這里推薦一篇寫的比較好的對vue-dev構(gòu)建過程以及整體結(jié)構(gòu)分析都寫的比較好的文章，本文也有部分參考挣跋，地址在這:
