Vue.js 3.0源碼解析（微課視頻版）

 

目錄

 

第1章初識Vue3

 

1.1Vue3簡介

 

1.2Vue3的變化

 

1.2.1架構變化

 

1.2.2代理方式變化

 

1.2.3Virtual DOM變化

 

1.3Vue3結構

 

第2章Vue3入門

 

2.1createApp()函數

 

2.2參數響應式

 

2.3effect副作用函數

 

2.4mount()函數

 

2.5patch()函數

 

2.6總結

 

第3章Vue3整體實現

 

3.1源碼調試

 

3.1.1代碼調試

 

3.1.2開啟sourceMap

 

3.1.3總結

 

3.2createApp()函數

 

3.2.1涉及文件

 

3.2.2調用createApp()函數

 

3.2.3調用createRenderer()函數

 

3.2.4總結

 

3.3mounted掛載

 

3.3.1涉及文件

 

3.3.2創建根組件VNode

 

3.3.3遞歸渲染

 

3.3.4創建組件上下文實例

 

3.3.5patch子樹

 

3.3.6總結

 

3.4setup函數

 

3.4.1涉及文件

 

3.4.2mountComponent()函數

 

3.4.3setupComponent()函數

 

3.4.4初始化代理上下文

 

3.4.5get方法

 

3.4.6set方法

 

3.4.7has方法

 

3.4.8調用setup函數

 

3.4.9finishComponentSetup()函數

 

3.4.10總結

 

3.5update方法

 

3.5.1涉及文件

 

3.5.2setupRenderEffect()函數

 

3.5.3updateComponentPreRender()函數

 

3.5.4updateComponent()函數

 

3.5.5shouldUpdateComponent()函數

 

3.5.6processElement()函數

 

3.5.7patchChildren()函數

 

3.5.8總結

 

3.6unmount方法

 

3.6.1涉及文件

 

3.6.2baseCreateRenderer()函數

 

3.6.3ref數據

 

3.6.4keepalive組件

 

3.6.5component組件

 

3.6.6suspense組件

 

3.6.7telport組件

 

3.6.8動態子組件等

 

3.6.9總結

 

 

第4章虛擬DOM

 

4.1VNode對象

 

4.1.1VNode簡介

 

4.1.2VNode聲明

 

4.1.3_createVNode()函數

 

4.1.4總結

 

4.2patch函數

 

4.2.1patch介紹

 

4.2.2text類型

 

4.2.3comment類型

 

4.2.4static類型

 

4.2.5fragment類型

 

4.2.6element類型

 

4.2.7component類型

 

4.2.8teleport類型

 

4.2.9suspense類型

 

4.3diff比較

 

4.3.1從前往後比較

 

4.3.2從後往前比較

 

4.3.3新增新VNode

 

4.3.4刪除舊VNode

 

4.3.5進一步判斷

 

4.3.6總結

 

第5章響應式API

 

5.1reactive響應式API

 

5.1.1使用方式

 

5.1.2兼容寫法

 

5.1.3reactive（）函數

 

5.1.4createReactiveObject()函數

 

5.1.5mutableHandlers()函數

 

5.1.6createGetter()函數

 

5.1.7createSetter()函數

 

5.1.8ref解析

 

5.1.9總結

 

5.2effect副作用函數

 

5.2.1實現

 

5.2.2mount(掛載)

 

5.2.3update(更新)

 

5.2.4創建effect副作用函數

 

5.2.5ReactiveEffect()函數

 

5.2.6處理激活狀態

 

5.2.7清除操作

 

5.2.8執行fn

 

5.2.9總結

 

5.3watch監聽

 

5.3.1watch函數

 

5.3.2初始化

 

5.3.3scheduler異步隊列

 

5.3.4watchEffect()函數

 

5.3.5總結

 

5.4computed函數

 

5.4.1創建getter副作用函數

 

5.4.2創建cRef

 

5.4.3總結

 

5.5拓展方法

 

5.5.1customRef()函數

 

5.5.2readonly()函數

 

5.5.3shallow()函數

 

5.5.4shallowReactive()函數

 

5.5.5shallowReadonly()函數

 

5.5.6總結

 

第6章生命周期

 

6.1生命周期函數

 

6.1.1執行順序

 

6.1.2生命周期實現

 

6.1.3injectHook()函數

 

6.1.4總結

 

6.2掛載回調

 

6.3更新回調

 

6.4卸載回調

 

6.5onErrorCaptured()鉤子函數

 

6.6onRender鉤子函數

 

第7章模板編譯

 

7.1模板渲染

 

7.2生成AST對象

 

7.2.1初始化解析函數

 

7.2.2初始化上下文

 

7.2.3根節點對象

 

7.2.4標簽解析

 

7.3AST對象優化

 

7.3.1transform（）函數

 

7.3.2靜態變量提升

 

7.4生成代碼字符串

 

7.4.1創建模板字符串上下文

 

7.4.2生成引用函數

 

7.4.3生成函數簽名

 

7.4.4判斷是否需要with函數擴展作用域

 

7.4.5資源分解處理

 

7.4.6生成節點代碼字符串

 

7.4.7返回代碼字符串

 

7.5生成render函數

 

7.6位運算

 

第8章組件和API實現

 

8.1Suspense

 

8.2teleport

 

8.3KeepAlive

 

8.4slot

 

8.5props

 

8.6defineAsyncComponent

 

8.7defineComponent（）

 

8.8directives

 

8.9scheduler

 

第9章整體架構

 

9.1架構設計

 

9.2打包工具

 

9.3構建工具

 

第10章實戰案例

 

10.1案例介紹

 

10.1.1項目介紹

 

10.1.2知識點介紹

 

10.2Vue3核心實戰

 

10.2.1登錄頁面

 

10.2.2註冊頁面

 

10.3Vue3模板編譯實戰

 

10.3.1首頁頁面

 

10.3.2個人資料頁面

 

10.4Vue3功能實戰

 

10.4.1寫作頁面

 

10.4.2個人主頁

 

參考文獻