vue源碼之首次渲染過程詳解
首次渲染
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
總結
本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!