vue源碼之首次渲染過程詳解

更新時間：2022年02月09日 09:40:33 作者：前端阿龍

這篇文章主要為大家詳細(xì)介紹了vue源碼之首次渲染過程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

首次渲染

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

在這里插入圖片描述

在這里插入圖片描述

在這里插入圖片描述

進(jìn)入runtime/index中的$mount方法可以看到最終調(diào)用了mountComponent函數(shù)來渲染dom

在這里插入圖片描述

在這里插入圖片描述

首次渲染過程

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