我們看到了VUE分了很多模塊（initMixin()stateMixin()eventsMixin()lifecycleMixin()renderMixin()），通過使用Mixin模式，都是使用了JavaScript原型繼承的原理，在Vue的原型上面增加屬性和方法。我們繼續跟著this._init(options)走，這個一點擊進去就知道了是進入了init.js文件是在initMixin函數里面給Vue原型添加的_init方法。首先來從宏觀看看這個init文件，可以看出主要是導出了兩個函數：initMixin和resolveConstructorOptions，具體作用我們一步步來討論。咋的一看這個文件，可能有些童鞋會看不明白函數參數括號里面寫的是什么鬼，這個其實是應用了flow的類型檢查，具體flow的使用這里就不介紹了，有興趣的請移步：https://flow.org/en/
我們現在來看第一個函數initMixin，Vue實例在初始化的時候就調用了這個函數，
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) } }}我們本著宏觀簡化原則，這個函數里面前面有三個if判斷工作我們可以先不細化討論，大致第一個是用performance做性能監測，第二個合并option，第三個是做代理攔截，是ES6新特性，可參考阮一峰大神關于proxy的介紹【http://es6.ruanyifeng.com/#docs/proxy】。那么就進入了初始化函數主要點：
initLifecycle(vm) //生命周期變量初始化initEvents(vm) //事件監聽初始化initRender(vm) //初始化渲染callHook(vm, 'beforeCreate') //回調鉤子beforeCreateinitInjections(vm) //初始化注入initState(vm) // prop/data/computed/method/watch狀態初始化initProvide(vm) // resolve provide after data/propscallHook(vm, 'created') //回調鉤子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)}這里來一個插曲start
V2.1.8及以前的版本】這里比較方便理解在生命周期created之后再做render，那么在created之前就無法獲取DOM。這也是在有些源碼解析文章里面很容易見到的分析，也是正確的
initLifecycle(vm)initEvents(vm)callHook(vm, 'beforeCreate')initState(vm)callHook(vm, 'created')initRender(vm)
v2.1.9及以后的版本】但到這里一開始就懵逼了很久render提到beforeCreate之前去了，那豈不是DOM在beforeCreate之前就能獲取到了？顯然不對了，請注意render雖然提前了，但是后面多了一個if這個if里面才獲取DOM的關鍵，這個if在2.1.8版本之前是在render函數里面的，在2.1.9之后被提出來，然后render函數提前了，至于為何提前暫未了解，此處只是踩了一個看其他源碼解析不同版本帶來的坑！
initLifecycle(vm)initEvents(vm)initRender(vm)callHook(vm, 'beforeCreate')initState(vm)callHook(vm, 'created')if (vm.$options.el) { vm.$mount(vm.$options.el)}插曲end，繼續
1.initLifecycle
function initLifecycle (vm: Component) { const options = vm.$options // locate first non-abstract parent let parent = options.parent //我理解為父實例或者父組件 if (parent && !options.abstract) { //例子中沒有parent，斷點代碼的時候自動跳過 while (parent.$options.abstract && parent.$parent) { parent = parent.$parent } parent.$children.push(vm) } vm.$parent = parent vm.$root = parent ? parent.$root : vm vm.$children = [] vm.$refs = {} vm._watcher = null vm._inactive = null vm._directInactive = false vm._isMounted = false vm._isDestroyed = false vm._isBeingDestroyed = false}這個函數主要是有父實例的情況下處理vm.$parent和vm.$children這倆個實例屬性,我此處沒有就跳過，其他的就是新增了一些實例屬性
2.initEvents
function initEvents (vm: Component) { vm._events = Object.create(null) vm._hasHookEvent = false // init parent attached events const listeners = vm.$options._parentListeners if (listeners) { updateComponentListeners(vm, listeners) }}又新增兩個屬性，后面那個if條件里面是有父組件的事件時初始化，估計就是props和events父子組件通信的事件內容。
3.initRender
function initRender (vm: Component) { vm._vnode = null // the root of the child tree vm._staticTrees = null const parentVnode = vm.$vnode = vm.$options._parentVnode const renderContext = parentVnode && parentVnode.context vm.$slots = resolveSlots(vm.$options._renderChildren, renderContext) vm.$scopedSlots = emptyObject vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false) vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true) const parentData = parentVnode && parentVnode.data /* istanbul ignore else */ if (process.env.NODE_ENV !== 'production') { defineReactive(vm, '$attrs', parentData && parentData.attrs, () => { !isUpdatingChildComponent && warn(`$attrs is readonly.`, vm) }, true) defineReactive(vm, '$listeners', vm.$options._parentListeners, () => { !isUpdatingChildComponent && warn(`$listeners is readonly.`, vm) }, true) } else { defineReactive(vm, '$attrs', parentData && parentData.attrs, null, true) defineReactive(vm, '$listeners', vm.$options._parentListeners, null, true) }}此函數也是初始化了節點屬性信息，綁定createElement函數到實例【并未掛載】，接下來調用beforeCreate回調鉤子；――TODO1：后續專題分析VUE渲染邏輯
4.initInjections
function initInjections (vm: Component) { const result = resolveInject(vm.$options.inject, vm) if (result) { observerState.shouldConvert = false Object.keys(result).forEach(key => { /* istanbul ignore else */ if (process.env.NODE_ENV !== 'production') { defineReactive(vm, key, result[key], () => { warn( `Avoid mutating an injected value directly since the changes will be ` + `overwritten whenever the provided component re-renders. ` + `injection being mutated: "${key}"`, vm ) }) } else { defineReactive(vm, key, result[key]) } }) observerState.shouldConvert = true }}此函數也是當有inject屬性時做處理，源碼例子無inject斷點跑暫時跳過
5.initState
function initState (vm: Component) { vm._watchers = [] const opts = vm.$options if (opts.props) initProps(vm, opts.props) if (opts.methods) initMethods(vm, opts.methods) if (opts.data) { initData(vm) } else { observe(vm._data = {}, true /* asRootData */) } if (opts.computed) initComputed(vm, opts.computed) if (opts.watch && opts.watch !== nativeWatch) { initWatch(vm, opts.watch) }}可以看出此處是對options傳入的props/methods/data/computed/watch屬性做初始化――――TODO2：分析每個屬性的初始化
6.initProvide
function initProvide (vm: Component) { const provide = vm.$options.provide if (provide) { vm._provided = typeof provide === 'function' ? provide.call(vm) : provide }}這個函數跟4.initInjections在同一個inject.js中，也是在傳入參數有provide屬性時做處理，暫時跳過，然后就到了created回調鉤子，最后的vm.$mount接入TODO1；
今天initMixin到此結束，以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
