首次渲染

src/core/instance/index.js 中的 this._init方法

init方法內部

$mount內部 - 編譯版本內部邏輯

$mount內部 - 運行時版本內部邏輯(最終執行) runtime/index中的 $mount方法

進入runtime/index中的$mount方法可以看到最終調用了mountComponent函數來渲染dom

core/instance/lifecycle 中的mountComponent

src/core/observer/watcher

總結

首次渲染過程

• vue初始化 實例成員 靜態成員
• new Vue()
• this._init()
• vm.$mount() - src/platforms/web/entry-runtime-with-compiler.js
  • 如果沒有傳遞render，把模版編譯成render函數
  • compileToFunctions()生成render()渲染函數
  • options.render = render
• vm.$mount() runtime/index中定義的 $mount 最終調用了mountComponent函數
• mountComponent(this,el) - src/core/instance/lifecycle.js
  • 判斷是否有render選項，如果沒有但是傳入了模版，并且當前是開發環境的話會發送警告
  • 觸發beforeMount
  • 定義 updateComponent
  • 創建watcher實例
  • 觸發mounted
  • return vm
• watcher.get()
  • 創建完watcher之后會調用一次get
  • 調用updateComponent函數
  • 調用 vm._render函數創建VNode
    • 調用render.call(vm._renderProxy, vm.$createElement)
    • 調用實例化時vue傳入的render 函數
    • 或者編譯template生成的render
    • 返回vnode
  • 調用vm._update內部調用vm.__patch__方法掛載真實dom 記錄 vm.$el

總結