vue源碼之首次渲染過程詳解
更新時(shí)間：2022年02月09日 09:40:33 作者：前端阿龍
這篇文章主要為大家詳細(xì)介紹了vue源碼之首次渲染過程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
首次渲染
src/core/instance/index.js 中的 this._init方法
init方法內(nèi)部
$mount內(nèi)部 - 編譯版本內(nèi)部邏輯
$mount內(nèi)部 - 運(yùn)行時(shí)版本內(nèi)部邏輯(最終執(zhí)行) runtime/index中的 $mount方法
進(jìn)入runtime/index中的$mount方法可以看到最終調(diào)用了mountComponent函數(shù)來渲染dom
core/instance/lifecycle 中的mountComponent
src/core/observer/watcher
總結(jié)
首次渲染過程
- 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)境的話會(huì)發(fā)送警告
- 觸發(fā)beforeMount
- 定義 updateComponent
- 創(chuàng)建watcher實(shí)例
- 觸發(fā)mounted
- return vm
- watcher.get()
- 創(chuàng)建完watcher之后會(huì)調(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í)例化時(shí)vue傳入的render 函數(shù)
- 或者編譯template生成的render
- 返回vnode
- 調(diào)用vm._update內(nèi)部調(diào)用vm.__patch__方法掛載真實(shí)dom 記錄 vm.$el
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue的ssr服務(wù)端渲染的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
解決Vue 移動(dòng)端點(diǎn)擊出現(xiàn)300毫秒延遲的問題
這篇文章主要介紹了解決Vue 移動(dòng)端點(diǎn)擊出現(xiàn)300毫秒延遲的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue實(shí)現(xiàn)指定日期之間的倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)指定日期之間的倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
vue中內(nèi)嵌iframe的src更新頁面未刷新問題及解決
這篇文章主要介紹了vue中內(nèi)嵌iframe的src更新頁面未刷新問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
Element Table的row-class-name無效與動(dòng)態(tài)高亮顯示選中行背景色
這篇文章主要介紹了Element Table的row-class-name無效與動(dòng)態(tài)高亮顯示選中行背景色，本文詳細(xì)的介紹了解決方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
Vue 電商后臺(tái)管理項(xiàng)目階段性總結(jié)(推薦)
這篇文章主要介紹了Vue 電商后臺(tái)管理項(xiàng)目階段性總結(jié)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-08
使用vue深度選擇器修改ElementUI組件內(nèi)樣式的示例代碼
在帶有scoped屬性的style中書寫樣式時(shí)，無法作用影響到子組件中的樣式，此時(shí)我們會(huì)使用到deep深度選擇器，來解決此問題，我們?cè)谑褂胠ess預(yù)處理器，能正常使用，但是在scss預(yù)處理器中會(huì)報(bào)錯(cuò)，下面通過本文介紹vue深度選擇器修改ElementUI組件內(nèi)樣式,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue 微信授權(quán)解決方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
vue實(shí)現(xiàn)自定義表格工具擴(kuò)展
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)自定義表格工具擴(kuò)展，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue調(diào)用swiper插件步驟教程(最易理解且詳細(xì))
有時(shí)候我們需要在vue中使用輪播組件,如果是在vue組件中引入第三方組件的話,最好通過npm安裝,從而進(jìn)行統(tǒng)一安裝包管理,下面這篇文章主要給大家介紹了關(guān)于vue調(diào)用swiper插件的相關(guān)資料,需要的朋友可以參考下2023-04-04