从源码角度分析vue初始化生命周期

从源码分析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更新，此处不展开了
  • __patch__方法在运行时挂载的
• callHook('mounted')