如何在不看源碼情況下學petite-vue源碼
大家好，我是卡頌。
周末沒啥事，準備找個優(yōu)秀且代碼量不多的庫學習下。最終選擇了最近發(fā)布的petite-vue，原因如下：
- 代碼量少(只有5.8kb)，且源碼模塊化程度高(相比于React)，易讀
- 基于Vite構建，執(zhí)行yarn dev就能開始調試源碼
- 沒有虛擬DOM、編譯時方案，可以作為讀Vue源碼的鋪墊
- 底層的響應式更新原理同樣適用于Mobx、SolidJS等庫，一次閱讀多份收獲
但是周末時間這么寶貴，而且我都4年沒用過Vue了，如何才能高效學習源碼呢?
最好是「在不看源碼的情況下把源碼學了」。
接下來，我就以petite-vue為例為大家示范學源碼的正確姿勢。
怎么快怎么來
可以將petite-vue理解為：用真實DOM取代Vue模版的簡易Vue。
比如如下Demo：
- <script type="module">
- import { createApp } from '../src'
- createApp({count: 0}).mount()
- </script>
- <div v-scope>
- <button @click="count++">add 1</button>
- <p>{{count}}</p>
- </div>
div及其子孫節(jié)點是真實的DOM標簽，所以頁面初始化時如下：
接著執(zhí)行如下代碼，完成petite-vue初始化：
- createApp({count: 0}).mount()
此時頁面：
讀框架源碼切忌一上手就從入口函數一路調試，很容易就懵逼了。正確的方式是像剝洋蔥一樣一層一層剝開：
這好像是大蒜?
所以，讓我們先從Performance面板看看「首屏渲染」的調用棧：
調用棧大體分為藍框、紅框兩部分，先看左邊藍框部分：
通過createContext與reactive關鍵詞判斷大概是創(chuàng)建響應式上下文。至于響應式的含義，我們還不清楚。
接著看右邊紅框部分：
從調用棧深度、頁面渲染的效果我們猜測，這部分做的工作包括：
- 遍歷DOM
- 完成數據與視圖的雙向綁定
- 初始化渲染
接下來，我們來驗證猜想。
注意，到目前為止，我們一行源碼都還沒看
驗證遍歷DOM
調用棧中walk與walkChildren被調用多次，大概率他們就是具體遍歷工作執(zhí)行的方法，讓我們確認下。
在源碼walk方法中打上log：
- export const walk = (node: Node, ctx: Context): ChildNode | null | void => {
- console.log('walk', node);
- // ...
- }
排除換行符"\n "對應的文本節(jié)點，打印順序如下：
- walk div
- walk <button>add 1</button>
- walk "add 1"
- walk <p>0</p>
- walk "0"
從打印結果看，這是個「深度優(yōu)先遍歷」(如果有子節(jié)點就遍歷子節(jié)點，沒有子節(jié)點就遍歷兄弟節(jié)點)
顯然，petite-vue mount時采用「深度優(yōu)先遍歷」，并對遍歷到的每個與「上下文狀態(tài)」相關的DOM節(jié)點進行處理。
在Demo中，上下文包含狀態(tài){count: 0}：
- createApp({count: 0}).mount()
在遍歷后<p>{{count}}</p>變?yōu)?lt;p>0</p>。
確定雙向綁定的粒度
接下來我們需要確認雙向綁定的作用范圍，即：
觸發(fā)更新后，多大范圍的DOM會被重新遍歷并執(zhí)行相應DOM操作?
打開Performance后，點擊<button>add 1</button>觸發(fā)更新：
可以看到，沒有任何walk、walkChildren(或類似遍歷過程)，只調用了reactiveEffect一個方法就更新了DOM。
這意味著mount時的深度優(yōu)先遍歷建立了狀態(tài)與更新DOM的方法之間一一對應的關系。
因為對應關系確定了，就不再需要額外的遍歷過程確定需要變化的DOM。
當更新狀態(tài)后，只需要找到與他有關系的更新DOM的方法執(zhí)行就行。
比如：將count狀態(tài)與如下函數建立聯系：
- function setCount(value) {
- p.textContent = value;
- }
每當count變化后調用setCount(count)就能更新p對應DOM。
所以，petite-vue的工作原理，主要包括兩點：
- mount時深度優(yōu)先遍歷DOM，對有狀態(tài)的DOM（比如<p>{{count}}</p>）建立狀態(tài)與更新DOM的方法之間一一對應的關系
- update時找到該狀態(tài)對應的更新DOM的方法并執(zhí)行
可以看到，即使不深入源碼，也能大體了解工作流程。
如果你想更進一步，比如了解「關系是如何建立的」(涉及到「響應式更新」)，那么就需要深入源碼了。
這里推薦Vue Mastery的Vue 3 Reactivity課程，可以補齊「響應式更新」這塊知識。
總結
本文介紹了復雜框架源碼的閱讀辦法 —— 即從抽象到具體。
- 從mount時與update時的調用棧推導出整體工作流程
- 從整體工作流程中發(fā)現核心知識 —— 響應式更新
當掌握整體工作流程與響應式更新后，再閱讀自己感興趣的部分才不至于陷入龐大的代碼量中。
你，學廢了么?
