Vue.js 設計與實現

霍春阳（HcySunYang）

Vue.js官方团队成员，专注于Web研发领域，是Vue.js 3的核心贡献者之一，Vue.js文档生成工具Vuese的作者，技术社区活跃者，曾撰写大量颇受好评的技术博客。

序

前言

第　1章 權衡的藝術　2

1.1　命令式和聲明式　2

1.2　性能與可維護性的權衡　3

1.3　虛擬DOM的性能到底如何　4

1.4　運行時和編譯時　8

1.5　總結　11

第　2章 框架設計的核心要素　12

2.1　提升用戶的開發體驗　12

2.2　控制框架代碼的體積　14

2.3　框架要做到良好的Tree-Shaking　15

2.4　框架應該輸出怎樣的構建產物　17

2.5　特性開關　19

2.6　錯誤處理　21

2.7　良好的TypeScript類型支持　23

2.8　總結　25

第3章　Vue.js 3的設計思路　27

3.1　聲明式地描述UI　27

3.2　初識渲染器　29

3.3　組件的本質　32

3.4　模板的工作原理　34

3.5　Vue.js是各個模塊組成的有機整體　36

3.6　總結　37

第4章　響應系統的作用與實現　40

4.1　響應式數據與副作用函數　40

4.2　響應式數據的基本實現　41

4.3　設計一個完善的響應系統　43

4.4　分支切換與cleanup　50

4.5　嵌套的effect與effect棧　55

4.6　避免無限遞歸循環　59

4.7　調度執行　60

4.8　計算屬性computed與lazy　64

4.9　watch的實現原理　71

4.10　立即執行的watch與回調執行時機　75

4.11　過期的副作用　77

4.12　總結　82

第5章　非原始值的響應式方案　84

5.1　理解Proxy和Reflect　84

5.2　JavaScript對象及Proxy的工作原理　88

5.3　如何代理Object　92

5.4　合理地觸發響應　102

5.5　淺響應與深響應　108

5.6　只讀和淺只讀　110

5.7　代理數組　113

5.7.1　數組的索引與 length　114

5.7.2　遍歷數組　119

5.7.3　數組的查找方法　124

5.7.4　隱式修改數組長度的原型方法　129

5.8　代理Set和Map　132

5.8.1　如何代理Set和Map　133

5.8.2　建立響應聯系　137

5.8.3　避免污染原始數據　140

5.8.4　處理forEach　143

5.8.5　迭代器方法　147

5.8.6　values與keys方法　152

5.9　總結　155

第6章　原始值的響應式方案　158

6.1　引入ref的概念　158

6.2　響應丟失問題　160

6.3　自動脫ref　164

6.4　總結　166

第7章　渲染器的設計　170

7.1　渲染器與響應系統的結合　170

7.2　渲染器的基本概念　172

7.3　自定義渲染器　175

7.4　總結　179

第8章　掛載與更新　180

8.1　掛載子節點和元素的屬性　180

8.2　HTML Attributes與DOM Properties　182

8.3　正確地設置元素屬性　184

8.4　class的處理　189

8.5　卸載操作　192

8.6　區分vnode的類型　195

8.7　事件的處理　196

8.8　事件冒泡與更新時機問題　201

8.9　更新子節點　204

8.10　文本節點和註釋節點　209

8.11　Fragment　212

8.12　總結　215

第9章　簡單Diff算法　218

9.1　減少DOM操作的性能開銷　218

9.2　DOM復用與key的作用　221

9.3　找到需要移動的元素　225

9.4　如何移動元素　228

9.5　添加新元素　233

9.6　移除不存在的元素　238

9.7　總結　241

第　10章 雙端Diff算法　242

10.1　雙端比較的原理　242

10.2　雙端比較的優勢　252

10.3　非理想狀況的處理方式　255

10.4　添加新元素　263

10.5　移除不存在的元素　268

10.6　總結　270

第　11章 快速Diff算法　271

11.1　相同的前置元素和後置元素　271

11.2　判斷是否需要進行DOM移動操作　279

11.3　如何移動元素　288

11.4　總結　296

第　12章 組件的實現原理　298

12.1　渲染組件　298

12.2　組件狀態與自更新　301

12.3　組件實例與組件的生命周期　304

12.4　props與組件的被動更新　306

12.5　setup函數的作用與實現　311

12.6　組件事件與emit的實現　314

12.7　插槽的工作原理與實現　316

12.8　註冊生命周期　318

12.9　總結　320

第　13章 異步組件與函數式組件　322

13.1　異步組件要解決的問題　322

13.2　異步組件的實現原理　324

13.2.1　封裝defineAsyncComponent函數　324

13.2.2　超時與Error組件　325

13.2.3　延遲與Loading組件　328

13.2.4　重試機制　331

13.3　函數式組件　333

13.4　總結　335

第　14章 內建組件和模塊　337

14.1　KeepAlive組件的實現原理　337

14.1.1　組件的激活與失活　337

14.1.2　include和exclude　342

14.1.3　緩存管理　343

14.2　Teleport組件的實現原理　346

14.2.1　Teleport組件要解決的問題　346

14.2.2　實現Teleport組件　347

14.3　Transition組件的實現原理　350

14.3.1　原生DOM的過渡　351

14.3.2　實現Transition組件　356

14.4　總結　360

第　15章 編譯器核心技術概覽　364

15.1　模板DSL的編譯器　364

15.2　parser的實現原理與狀態機　368

15.3　構造AST　374

15.4　AST的轉換與插件化架構　383

15.4.1　節點的訪問　383

15.4.2　轉換上下文與節點操作　387

15.4.3　進入與退出　392

15.5　將模板AST轉為JavaScript AST　396

15.6　代碼生成　402

15.7　總結　407

第　16章 解析器　409

16.1　文本模式及其對解析器的影響　409

16.2　遞歸下降算法構造模板AST　413

16.3　狀態機的開啟與停止　419

16.4　解析標簽節點　426

16.5　解析屬性　430

16.6　解析文本與解碼HTML實體　436

16.6.1　解析文本　436

16.6.2　解碼命名字符引用　438

16.6.3　解碼數字字符引用　445

16.7　解析插值與註釋　449

16.8　總結　451

第　17章 編譯優化　453

17.1　動態節點收集與補丁標志　453

17.1.1　傳統Diff算法的問題　453

17.1.2　Block與PatchFlags　454

17.1.3　收集動態節點　457

17.1.4　渲染器的運行時支持　459

17.2　Block樹　461

17.2.1　帶有v-if指令的節點　462

17.2.2　帶有v-for指令的節點　464

17.2.3　Fragment的穩定性　465

17.3　靜態提升　466

17.4　預字符串化　468

17.5　緩存內聯事件處理函數　469

17.6　v-once　470

17.7　總結　471

第　18章 同構渲染　474

18.1　CSR、SSR以及同構渲染　474

18.2　將虛擬DOM渲染為HTML字符串　478

18.3　將組件渲染為HTML字符串　484

18.4　客戶端激活的原理　489

18.5　編寫同構的代碼　494

18.5.1　組件的生命周期　494

18.5.2　使用跨平臺的API　496

18.5.3　只在某一端引入模塊　496

18.5.4　避免交叉請求引起的狀態污染　497

18.5.5　組件　498

18.6　總結　499