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