我的学习历程（一）——整体初始化流程

在编写vue代码时，必然会用到vue的初始化流程，如下：

var app = new Vue({
    el: #app,
    template: '<App></App>',
    render: h => h(App)
    data: {},
    components: {}
}).$mount('#app')

那么问题来了，

• 上面的每个参数起什么作用呢？
• 各个参数对应vue哪个生命周期？

1、初始化所有方法，并绑定到vue.propertype上面。（即顺序执行如下方法 ---> 执行结果）

1、core/instance/index.js

• initMixin(Vue) ---> Vue.prototype._init()
• stateMixin(Vue) ---> Vue.prototype.$data, Vue.prototype.$props,Vue.prototype.$set(), Vue.prototype.$delete(), Vue.prototype.$watch()
• eventsMixin(Vue) ---> Vue.prototype.$on, Vue.prototype.$emit
• lifecycleMixin(Vue) ---> Vue.prototype._update(), Vue.prototype.$forceUpdate(), Vue.prototype.$destroy
• renderMixin(Vue) ---> Vue.prototype.$nextTick(), Vue.prototype._render()

2、core/index.js

• initGlobalAPI(Vue) ---> Vue.config, Vue.set, Vue.delete, Vue.nextTick,Vue.observable, Vue.options.components, Vue.options.filters, Vue.options.directives,

• initUse(Vue) ---> Vue.use()
• initMixin(Vue) ---> Vue.mixin()
• initExtend(Vue) ---> Vue.extend()
• initAssetRegisters(Vue) ---> Vue.components(), Vue.filters(), Vue.directives()

2、执行_init()方法， 初始化全部（包括data, method, 生命周期中）定义的方法，并挂载到vm对象上

1、core/instance/index.js

this._init(options) ---> vm._uid, vm._isVue, vm.$options, vm._renderProxy, vm._self

• initLifecycle(vm) ---> vm.$parent, vm.$root, vm.$children, vm.$refs, vm._watcher, vm._inactive, vm._directInactive, vm._isMounted, vm._isDestroyed, vm._isBeingDestroyed
• initEvents(vm) ---> vm._events, vm._hasHookEvent 事件监听初始化
• initRender(vm) ---> 定义vm._vnode, vm._staticTrees, vm.$slots, vm.$scopedSlots, vm._c(), vm.$createElement(), vm.$attrs， vm.$listeners
• callHook(vm, 'beforeCreate') ---> 执行beforeCreate里面定义初始化的方法
• initInjections(vm) ---> 获取注入数据并做响应化
• initState(vm)

• initProps(vm, opts.props) ---> 将初始化时定义的props绑定给vm
• initMethods(vm, opts.methods) ---> 将初始化时定义的方法绑定给vm
• initComputed(vm, opts.computed) ---> 绑定在监控对象上
• initWatch(vm, opts.watch) ---> 绑定在vm.$watch上

• initProvide(vm) ---> 将初始化时注入的数据绑定在vm._provided
• callHook(vm, 'created') ---> 执行created里面定义初始化的方法

3、执行mountComponent() ， 为挂载做最后准备

1、platforms/web/entry-runtime-with-compiler.js

• 执行Vue.prototype.$mount（此时Vue为runtime/index下） ---> 得到render, template，el, 执行优先级为render > template > el, 并且在template中，可以传并确认优先级为字符串模板 > dom树
• 执行compileToFunctions()，得到render函数, 将其挂在vm.$options上

2、platforms/web/runtime/index.js

• 执行Vue.prototype.$mount（此时Vue为core/index下）

• mountComponent(this, el, hydrating) ---> vm.$el = el, callHook(vm, 'beforeMount'), vm._update(vm._render(), hydrating), vm._isMounted = true, callHook(vm, 'mounted')
• return vm

4、完成挂载app.$mount('.app')

1、platforms/web/entry-runtime-with-compiler.js

• mount.call(vm, el, hydrating)， 将上面的vm对象和el参数传给mount方法，也就是的Vue.prototype.$mount方法

最后，主要的初始化流程大概就是这些，还有很多未写进去的初始化相关代码模块，比如component.js，factory.js等等，过于庞大，不再做深入研究