我們看到了VUE分了很多模塊（initMixin()stateMixin()eventsMixin()lifecycleMixin()renderMixin()），通過使用Mixin模式，都是使用了JavaScript原型繼承的原理，在Vue的原型上面增加屬性和方法。我們繼續(xù)跟著this._init(options)走，這個一點(diǎn)擊進(jìn)去就知道了是進(jìn)入了init.js文件是在initMixin函數(shù)里面給Vue原型添加的_init方法。首先來從宏觀看看這個init文件，可以看出主要是導(dǎo)出了兩個函數(shù)：initMixin和resolveConstructorOptions，具體作用我們一步步來討論。咋的一看這個文件，可能有些童鞋會看不明白函數(shù)參數(shù)括號里面寫的是什么鬼，這個其實(shí)是應(yīng)用了flow的類型檢查，具體flow的使用這里就不介紹了，有興趣的請移步：https://flow.org/en/

我們現(xiàn)在來看第一個函數(shù)initMixin，Vue實(shí)例在初始化的時候就調(diào)用了這個函數(shù)，

let uid = 0export function initMixin (Vue: Class<Component>) { Vue.prototype._init = function (options?: Object) {  const vm: Component = this  // a uid  vm._uid = uid++  let startTag, endTag  /* istanbul ignore if */  【**注：istanbul 是代碼覆蓋率檢測工具，此注釋為代碼測試用**】  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {   startTag = `vue-perf-init:${vm._uid}`   endTag = `vue-perf-end:${vm._uid}`   mark(startTag)  }  // a flag to avoid this being observed  vm._isVue = true  // merge options  if (options && options._isComponent) {   // optimize internal component instantiation   // since dynamic options merging is pretty slow, and none of the   // internal component options needs special treatment.   initInternalComponent(vm, options)  } else {   vm.$options = mergeOptions(    resolveConstructorOptions(vm.constructor),    options || {},    vm   )  }  /* istanbul ignore else */  if (process.env.NODE_ENV !== 'production') {   initProxy(vm)  } else {   vm._renderProxy = vm  }  // expose real self  vm._self = vm  initLifecycle(vm)  initEvents(vm)  initRender(vm)  callHook(vm, 'beforeCreate')  initInjections(vm) // resolve injections before data/props  initState(vm)  initProvide(vm) // resolve provide after data/props  callHook(vm, 'created')  /* istanbul ignore if */  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {   vm._name = formatComponentName(vm, false)   mark(endTag)   measure(`${vm._name} init`, startTag, endTag)  }  if (vm.$options.el) {   vm.$mount(vm.$options.el)  } }}

我們本著宏觀簡化原則，這個函數(shù)里面前面有三個if判斷工作我們可以先不細(xì)化討論，大致第一個是用performance做性能監(jiān)測，第二個合并option，第三個是做代理攔截，是ES6新特性，可參考阮一峰大神關(guān)于proxy的介紹【http://es6.ruanyifeng.com/#docs/proxy】。那么就進(jìn)入了初始化函數(shù)主要點(diǎn)：

initLifecycle(vm) //生命周期變量初始化initEvents(vm) //事件監(jiān)聽初始化initRender(vm) //初始化渲染callHook(vm, 'beforeCreate')  //回調(diào)鉤子beforeCreateinitInjections(vm) //初始化注入initState(vm)  // prop/data/computed/method/watch狀態(tài)初始化initProvide(vm)   // resolve provide after data/propscallHook(vm, 'created')   //回調(diào)鉤子created/* istanbul ignore if */if (process.env.NODE_ENV !== 'production' && config.performance && mark) { vm._name = formatComponentName(vm, false) mark(endTag) measure(`${vm._name} init`, startTag, endTag)}if (vm.$options.el) { vm.$mount(vm.$options.el)}