从源码分析vue初始化生命周期
官方生命周期示意图:
下面从源码角度一步步解析vue生命周期初始化流程:
- new Vue
- this._init(options)
- 初始化
- initLifecycle
- initEvents
- initRender
- callHooks('beforeCreate')
- initInjections
// 组件上下文:注入 - initState
- initProps
- initMethods
- initData
- initComputed
- initWatch
- initProvide
// 组件上下文:产生 - callHook('created')
- vm.$mount
- mountComponent
render ? continue : ((template || el) ? warn() :warn()) //这里主要做一些参数判断- callHook('beforeMount')
- vm._update(vm._render())
- vm._render()
- render.call(vm._renderProxy, vm.$createElement)
// 代理报错 - 将vm.$createElement方法作为render的回调参数
//就是我们平时所写的render(h)中的h - createElement
- _createElement返回vnode
- vm._update(vnode)
- vm.__patch__()
// 涉及到vnode更新,此处不展开了 - callHook('mounted')