Vue原始碼主體分析

2022-09-17 23:06:18 字數 949 閱讀 3269

vue的響應式和react的函式式程式設計思想是很不同的。

vue最基本的原理是對getter和setter的**模式。以及觀察者模式。

當資料發生變化時,通知觀察者。

而watcher是通過觸發資料的getter,成為觀察者的。

vue的生命週期中,

在create階段,vue建立了例項。

在mount 階段,vue初始化了響應式(資料劫持)。

在update階段,通過dom diff, vue可以做到對未改變的dom的復用。同一層的如果有設定key,diff得時候就不需要去一一對比,速度會更加快。

首先,vue是如何做到把template最後變成dom元素的呢?

1.通過正則處理template,生成ast之後,經過優化(靜態標記),再生成字串。

2.把字串作為引數傳給 new function。生成render函式。

3.執行render函式,生成vnode,也就是虛擬dom.

4.patch,如果是在初始化過程中,就根據vnode直接建立dom,否則就進行dom diff。 

5.替換掛載dom節點。

(子元件其實是在父元件patch的時候才開始create的,但是最先完成patch)

(vue**有不同作用域的同名函式。。createcomponent)

當最內部的子元件__patch__完畢之後,,vue通過restore操作activeinstance(遞迴)建立了prent和children的引用關係。

至於元件slot的處理,是在執行render函式的過程中,用parse出來的children代替了

watcher分為3種,第一種是renderwatcher,就是實現dom響應式的主watcher,一種是computed watcher,加了快取,如果資料不改變就用快取的資料,另外一種就是使用者的watch了。其中有immediate,deep等差異。

總之,就不貼具體**啦

runC原始碼分析 主體呼叫鏈

下圖中,runc原始碼邏輯跳轉流程總體上分為三步 main入口 runc處理 libcontainer處理。runc其實就是在libcontainer的基礎上進行了封裝成各個command。具體runc的各個command的呼叫鏈見如下 checkpointcommand main.go check...

Vue原始碼分析

在開始原始碼分析工作之前,我們在當前篇章做好相應的準備工作,以便更好地展開分析。將原始碼fork到自己的github倉庫中 git clone 自己的github vue 位址 dist 打包之後的結果 examples 示例 src compiler 編譯相關 core vue 核心庫 compo...

Vue原始碼分析(流程分析)

使用步驟 1.編寫 頁面 模板 1.直接在html標籤中寫 2.使用template 3.使用單檔案 2.建立vue例項 1.在vue 的建構函式中 data,methods,computer,watcher,props,3.將vue掛載到頁面中 mount 資料驅動模型 vue執行流程 1.獲得模...