教你閱讀vue原始碼的正確姿勢，看完就學廢！

簡介一下個人閱讀vue原始碼的姿勢，有建議歡迎評論區補充哈～

一、原始碼閱讀姿勢

1. 先整體 - 后細節

• 先弄清楚原始碼分為哪幾個模塊，整套流程是怎么將各個模塊串起來的，
• 然后細化了解每個模塊的核心原理，

2. 站在別人的肩膀上

• 不用一股腦扎進原始碼倉庫里一點點啃，這樣很低效，適用于對原始碼較為了解的人
• 推薦先讀別人的原始碼簡介，原始碼分析，弄清楚脈絡，還有每個部分的大概功能和核心流程，心里帶著思路去看原始碼實作，
• 多數情況不需要逐行代碼的細究，但針對某些核心功能的實作需要細究，例如：虛擬dom、diff演算法、資料驅動、回應式實作以及組件化等核心的功能的核心實作推薦細看，

3. 讀多遍

• 一次粗讀：看整體流程，看每個模塊的核心功能和職責，體會平時寫的代碼在原始碼里面經過了什么步驟體現到了頁面上，
• 二次精讀：看細節實作，弄清楚核心模塊的實作方式（如弄懂diff演算法思路，最好自己動手實作），
• 三次領悟：領悟原始碼整體架構和設計思想，體會每個模塊之間如何配合協作，架構如何組織，

二、步驟

• 依賴分析組裝：路由、父子組件層級
• 模版編譯：決議成AST語法樹，進而構建虛擬dom樹
• 裝載頁面：虛擬dom整體轉化為真實dom
• 區域更新：回應式資料監控到變化，diff比較資料變化前后的虛擬dom樹差異，區域更新dom
• 銷毀：銷毀虛擬dom，移除dom

三、vue原始碼導讀

• template風格、物件配置風格
• 虛擬dom思想（js物件操作代替dom操作）
• diff演算法思想（同層比較，添加、移動、洗掉）
• 組件化思想（組件編譯、組件通信）
• 資料回應式（依賴收集、派發更新，發布訂閱）

四、vue3新特性了解

vue2.x的痛點:

• 原始碼自身的維護性；
• 資料量大后帶來的渲染和更新的性能問題；
• 一些想舍棄但為了兼容一直保留的雞肋 API 等；
• TypeScript 支持；

vue3.0優化點:

• 一、使用 monorepo管理原始碼
• 二、使用 TypeScript 開發原始碼
• 三、性能優化 1.原始碼體積優化 2.資料劫持優化Proxy 3.編譯優化 4.diff演算法優化
• 四、語法 API 優化：Composition API

插一個題外話，小編整理了下用 Vue 3.0 來寫個小程式框架的PDF資料，感興趣的小伙伴們請點擊這里領取

五、細究一下diff演算法

vue2的diff

組件更新核心是回應式資料監控到資料的改變，重新生成了虛擬dom樹，然后通過diff演算法計算出前后虛擬dom樹的差異點，更新dom時只更新變化的部分， 快問快答：

1. 為什么要diff？

答： O(n^3) 意味著如果要展示1000個節點，就要依次執行上十億次的比較，無法承受大資料量的對比，

直接比較和修改兩個樹的復雜度為什么是n^3？

答： 老樹的每一個節點都去遍歷新樹的節點，直到找到新樹對應的節點，那么這個流程就是 O(n^2)，再緊接著找到不同之后，再計算最短修改距離然后修改節點，這里是 O(n^3)，

2. diff的策略是什么？有什么根據？

答： 1、Web UI 中 DOM 節點跨層級的移動操作特別少，可以忽略不計，因此僅進行同層比較， 2、如果父節點不同，放棄對子節點的比較，直接洗掉舊節點然后添加新的節點重新渲染； 3、如果子節點有變化，Virtual DOM不會計算變化的是什么，而是重新渲染， 4、同級多個節點可通過唯一的key對比異同；

3. diff流程是什么？

答： 新舊節點不同：創建新節點 ? 更新父占位符節點 ? 洗掉舊節點； 新舊節點相同且沒有子節點：不變； 新舊節點相同且都有子節點：遍歷子節點同級比較，做移動、添加、洗掉三個操作，具體見下圖；

vue3.0的diff

深度遞回遍歷vnode樹，節點的標簽和key相同認為是同一個節點則更新，不同則洗掉，然后處理子節點， 子節點分這幾種情況處理：純文本、vnode 陣列和空

空往往意味著添加或洗掉； 純文本相同直接更新innerText，不同則洗掉； 新舊子節點都是vnode陣列則diff演算法來處理；

vue3.0 diff演算法思想

• 編譯模版時進行靜態分析，標記動態節點，diff對比差異時僅對比動態節點（性能提升明顯）；
• diff演算法先去頭去尾，借此縮短遍歷對比陣列長度（對陣列插入和洗掉操作性能優化明顯）；
• 通過對更新前后子節點陣列建立映射表的方式，將O(n^2)復雜度的遍歷降低到O(n)；
• 通過最長遞增子序列方法了來diff前后的子節點陣列，減少移動操作的次數；

最長遞增子序列演算法實作：

/*
 * 尋找最長遞增子序列
 * 使用動態規劃思想，a -> c = a -> b + b -> c
 * 其中p陣列存盤的是從p[p[i]] 到 p[i] 的最長遞增子序列索引，也就是前一個b的索引；
 * r陣列存盤最后一個元素也就是c的索引
 */
 function getSequenceOfLIS(arr) {
    const p = [0];
    const result = [0];
    for (let i = 0; i < arr.length; i ++) {
        const val = arr[i];
        const top = result[result.length - 1];
        if (arr[top] < val) {
            p[i] = top;
            result.push(i);
            continue;
        }
        // 二分法搜索
        let l = 0, r = result.length - 1;
        while(l < r) {
            const c = (l + r) >> 1;
            if (arr[result[c]] < val) {
                l = c + 1;
            } else {
                r = c;
            }
        }
        if (val < arr[result[l]]) {
            if (l > 0) {
                p[i] = result[l - 1]
            }
            result[l] = i;
        }
    }
    // 回朔p陣列，找出最長遞增子序列
    let preIndex = result[result.length - 1];
    for (let i = result.length - 1; i > 0; i --) {
        result[i] = preIndex;
        preIndex = p[preIndex]
    }
    return result;
}

閱讀vue原始碼姿勢小伙伴們你們學廢了嘛，你們都是如何閱讀的呢，歡迎評論留言告訴小編哦，

有想學用 Vue 3.0 來寫個小程式框架的小伙伴們記得領取PDF資料！點擊這里也是一樣可以領取的

求點贊求支持！提前祝小伙伴們五一快樂嗷！