Vue 的首次渲染的過程

2021-10-11 00:26:43 字數 413 閱讀 6344

vue版本:2.6.10

首先進行vue的初始化,初始化vue的例項成員和靜態成員

呼叫建構函式中的_init()方法,作為整個vue的入口

在_init()中呼叫$mount()方法:

呼叫mountcomponent(),src/core/instance/lifecycle.js中定義

判斷render選項,若執行時版本&沒有render&傳入了模板,會警告執行時版本不支援編譯器

觸發beforemount()

定義updatecomponent(),該方法中呼叫了兩個方法:

建立watcher物件。建立時傳遞了updatecomponent()並在內部呼叫get()時呼叫了updatecomponent()

觸發mounted()

return vm

vue渲染過程

把模板編譯為render函式 例項進行掛載,根據根節點render函式的呼叫,遞迴的生成虛擬dom 對比虛擬dom,渲染到真實dom 元件內部data發生變化,元件和子元件引用data作為props重新呼叫render函式,生成虛擬dom,返回到步驟3 第一步 模板變成render函式 hello ...

二 Vue 頁面渲染過程

上篇博文我們依葫蘆畫瓢已經將hello world 展現在介面上啦,但是是不是感覺新虛虛的,總覺得這麼多檔案,專案怎麼就啟動起來了呢?怎麼訪問到8080 埠就能進入到我們的首頁呢。整個的流程是怎麼樣的呢?我也是剛剛接觸,所以就會有這樣的困惑,所以這篇就簡單的理解一下專案頁面渲染的過程。我們上篇文章說...

vue渲染過程解析 VDOM DOM

前言 大家知道乙個複雜的頁面會包含大量的dom節點,為了高效地更新這些dom節點,vue設計了虛擬dom的概念。虛擬dom是對真實dom節點資訊的描述。在vue中,每乙個dom節點都會有乙個虛擬dom節點與之對應。這個虛擬dom節點,我們也稱之為vnode,而由vnode所組成的整個vnode樹就是...