從源碼角度分析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')