Vue.js 源碼全方位深入解析
本課程從基礎的 Vue源碼目錄設計、源碼構建開始講起，包括數據驅動，響應式原理，讓同學們深入全面理解Vue的實現原理，掌握源碼分析技巧，牢固對Vue的使用，斬斷BAT進階攔路虎，快人一步進名企。
-
第1章 準備工作
介紹了 Flow、Vue.js 的源碼目錄設計、Vue.js 的源碼構建方式，以及從入口開始分析了 Vue.js 的初始化過程。
- 1-1 課程簡介
- 1-2 準備工作
- 1-3 認識 Flow-文檔
- 1-4 認識 Flow
- 1-5 Vue.js 源碼目錄設計-文檔
- 1-6 Vue.js 源碼目錄設計
- 1-7 Vue.js 源碼構建-文檔
- 1-8 Vue.js 源碼構建
- 1-9 從入口開始-文檔
- 1-10 從入口開始
-
第2章 數據驅動
詳細講解了模板數據到 DOM 渲染的過程，從 new Vue 開始，分析了 mount、render、update、patch 等流程。
- 2-1 數據驅動-文檔
- 2-2 數據驅動
- 2-3 new Vue 發生了什麼-文檔
- 2-4 new Vue 發生了什麼
- 2-5 Vue 實例掛載的實現-文檔
- 2-6 Vue 實例掛載的實現
- 2-7 render-文檔
- 2-8 render
- 2-9 Virtual DOM-文檔
- 2-10 Virtual DOM
- 2-11 createElement-文檔
- 2-12 createElement
- 2-13 update-文檔
- 2-14 update
-
第3章 組件化
分析了組件化的實現原理，並且分析了組件周邊的原理實現，包括合併配置、生命週期、組件註冊、異步組件。
- 3-1 組件化-文檔
- 3-2 組件化
- 3-3 createComponent-文檔
- 3-4 createComponent
- 3-5 patch-文檔
- 3-6 patch（上）
- 3-7 patch（下）
- 3-8 合併配置-文檔
- 3-9 合併配置（上）
- 3-10 合併配置（下）
- 3-11 生命週期-文檔
- 3-12 生命週期
- 3-13 組件註冊-文檔
- 3-14 組件註冊（上）
- 3-15 組件註冊（下）
- 3-16 異步組件-文檔
- 3-17 異步組件（工廠函數）
- 3-18 異步組件（Promise）
- 3-19 異步組件（高級）
-
第4章 深入響應式原理（上）
詳細講解了數據的變化如何驅動視圖的變化，分析了響應式對象的創建，依賴收集、派發更新的實現過程，一些特殊情況的處理，並對比了計算屬性和偵聽屬性的實現，最後分析了組件更新的過程。
- 4-1 深入響應式原理-文檔
- 4-2 深入響應式原理
- 4-3 響應式對象-文檔
- 4-4 響應式對象（上）
- 4-5 響應式對象（下）
- 4-6 依賴收集-文檔
- 4-7 依賴收集（上）
- 4-8 依賴收集（下）
- 4-9 派發更新-文檔
- 4-10 派發更新（上）
- 4-11 派發更新（下）
- 4-12 nextTick-文檔
- 4-13 nextTick
- 4-14 檢測變化的注意事項-文檔
- 4-15 檢測變化的注意事項
-
第5章 深入響應式原理（下）
詳細講解了數據的變化如何驅動視圖的變化，分析了響應式對象的創建，依賴收集、派發更新的實現過程，一些特殊情況的處理，並對比了計算屬性和偵聽屬性的實現，最後分析了組件更新的過程。
- 5-1 計算屬性 VS 偵聽屬性-文檔
- 5-2 計算屬性 VS 偵聽屬性（1）
- 5-3 計算屬性 VS 偵聽屬性（2）
- 5-4 計算屬性 VS 偵聽屬性（3）
- 5-5 計算屬性 VS 偵聽屬性（4）
- 5-6 計算屬性 VS 偵聽屬性（5）
- 5-7 組件更新-文檔
- 5-8 組件更新（1）
- 5-9 組件更新（2）
- 5-10 組件更新（3）
- 5-11 原理圖
-
第6章 編譯（上）
從編譯的入口函數開始，分析了編譯的三個核心流程的實現：parse -> optimize -> codegen。
- 6-1 編譯
- 6-2 編譯入口（上）
- 6-3 編譯入口（下）
- 6-4 parse（1）
- 6-5 parse（2）
- 6-6 parse（3）
- 6-7 parse（4）
- 6-8 parse（5）
- 6-9 parse（6）
- 6-10 parse（7）
- 6-11 parse（8）
- 6-12 parse（9）
- 6-13 parse（10）
-
第7章 編譯（下）
從編譯的入口函數開始，分析了編譯的三個核心流程的實現：parse -> optimize -> codegen。
- 7-1 optimize（上）
- 7-2 optimize（下）
- 7-3 codegen（1）
- 7-4 codegen（2）
- 7-5 codegen（3）
- 7-6 codegen（4）
-
第8章 擴展（上）
詳細講解了 event、v-model、slot、keep-alive、transition、transition-group 等常用功能的原理實現，該章節作爲一個可擴展章節，未來會分析更多 Vue 提供的特性。
- 8-1 擴展
- 8-2 event（1）
- 8-3 event（2）
- 8-4 event（3）
- 8-5 event（4）
- 8-6 event（5）
- 8-7 event（6）
- 8-8 event（7）
- 8-9 event（8）
- 8-10 event（9）
-
第9章 擴展（中）
詳細講解了 event、v-model、slot、keep-alive、transition、transition-group 等常用功能的原理實現，該章節作爲一個可擴展章節，未來會分析更多 Vue 提供的特性。
- 9-1 v-model（1）
- 9-2 v-model（2）
- 9-3 v-model（3）
- 9-4 v-model（4）
- 9-5 v-model（5）
- 9-6 v-model（6）
- 9-7 v-model（7）
- 9-8 slot（1）
- 9-9 slot（2）
- 9-10 slot（3）
- 9-11 slot（4）
- 9-12 slot（5）
- 9-13 slot（6）
- 9-14 slot（7）
- 9-15 slot（8）
- 9-16 slot（9）
- 9-17 slot（10）
-
第10章 擴展（下）
詳細講解了 event、v-model、slot、keep-alive、transition、transition-group 等常用功能的原理實現，該章節作爲一個可擴展章節，未來會分析更多 Vue 提供的特性。
- 10-1 keep-alive（1）
- 10-2 keep-alive（2）
- 10-3 keep-alive（3）
- 10-4 keep-alive（4）
- 10-5 keep-alive（5）
- 10-6 keep-alive（6）
- 10-7 transition（1）
- 10-8 transition（2）
- 10-9 transition（3）
- 10-10 transition（4）
- 10-11 transition-group（1）
- 10-12 transition-group（2）
- 10-13 transition-group（3）
- 10-14 transition-group（4）
-
第11章 Vue-Router
分析了 Vue-Router 的實現原理，從路由註冊開始，分析了路由對象、matcher，並深入分析了整個路徑切換的實現過程和細節。
- 11-1 Vue Router
- 11-2 路由註冊
- 11-3 VueRouter 對象
- 11-4 matcher（1）
- 11-5 matcher（2）
- 11-6 matcher（3）
- 11-7 matcher（4）
- 11-8 路徑切換（1）
- 11-9 路徑切換（2）
- 11-10 路徑切換（3）
- 11-11 路徑切換（4）
- 11-12 路徑切換（5）
- 11-13 路徑切換（6）
- 11-14 路徑切換（7）
- 11-15 路徑切換（8）
- 11-16 路徑切換（9）
- 11-17 路徑切換（10）
- 11-18 路徑切換（11）
-
第12章 Vuex
分析了 Vuex 的實現原理，深入分析了它的初始化過程，常用 API 以及插件部分的實現。
- 12-1 Vuex介紹
- 12-2 Vuex 初始化（1）
- 12-3 Vuex 初始化（2）
- 12-4 Vuex 初始化（3）
- 12-5 Vuex 初始化（4）
- 12-6 Vuex 初始化（5）
- 12-7 Vuex 初始化（6）
- 12-8 Vuex 初始化（7）
- 12-9 Vuex 初始化（8）
- 12-10 Vuex 初始化（9）
- 12-11 API（1）
- 12-12 API（2）
- 12-13 API（3）
- 12-14 API（4）
- 12-15 API（5）
- 12-16 插件