Vue.js 技術內幕

黃軼

  • 出版商: 人民郵電
  • 出版日期: 2022-09-01
  • 定價: $719
  • 售價: 8.5$611
  • 語言: 簡體中文
  • 頁數: 474
  • ISBN: 7115596468
  • ISBN-13: 9787115596468
  • 相關分類: Vue.js
  • 立即出貨 (庫存 < 4)

  • Vue.js 技術內幕-preview-1
  • Vue.js 技術內幕-preview-2
Vue.js 技術內幕-preview-1

買這商品的人也買了...

相關主題

商品描述

本書將帶領讀者閱讀 Vue.js 3.0 的源碼,通過大量註釋、流程圖,將每部分源碼的前因後果呈現給大家,幫助工程師地體會 Vue 框架的設計思想。全書共七部分,24 章,作者結合實際用例,循序漸進地介紹了 Vue.js 的整體設計、組件、響應式原理、編譯和優化、實用特性、內置組件、官方生態等內容。閱讀本書不僅可以深入理解Vue.js 的內核實現,還能學習到閱讀源碼的技巧,提高業務邏輯分析能力和重構代碼的能力。

本書面向有 Vue.js、React 或者 Angular 等框架使用經驗的,對源碼設計感興趣,渴望在技術方向進一步成長的開發者。

作者簡介

黄轶,曾任职于百度、滴滴,现担任Zoom前端架构师,推进前后端分离架构方案,同时负责Zoom自研组件库 ZoomUI 的开发。专栏“Vue.js 3.0 核心源码解析”作者,14k star 开源项目 better-scroll 作者。慕课网明星讲师,教授“Vue.js 高仿开发饿了么外卖 App”“Vue 3 开发企业级音乐Web App”“Vue.js 源码全方位深入解析”等课程,帮助上万名学生完成 Vue.js 从入门到进阶的学习。

“老黄的前端私房菜”主理人,不定期分享技术干货和软素质技能。

目錄大綱

目錄

第 一部分 Vue.js 的整體設計

第 1章 Vue.js 3.x 的優化 2

1.1 源碼優化 2

1.1.1 monorepo 2

1.1.2 TypeScript 3

1.2 性能優化 4

1.2.1 源碼體積優化 4

1.2.2 數據劫持優化 5

1.2.3 編譯優化 7

1.3 語法API 優化 9

1.3.1 優化邏輯組織 9

1.3.2 優化邏輯復用 12

1.4 引入RFC 14

1.5 總結 14

第 2章 Vue.js 3.x 源碼總覽 15

2.1 源碼目錄結構 15

2.2 不同構建版本Vue.js 的使用場景 18

2.2.1 Runtime-only 與 Runtime + Compiler 19

2.2.2 CDN 直接使用 19

2.2.3 配合打包工具使用 20

2.2.4 服務端渲染使用 20

2.3 編譯構建 21

2.3.1 收集編譯目標 21

2.3.2 並行編譯 21

2.3.3 單個編譯 22

2.4 rollup 配置 23

2.4.1 輸入與輸出 24

2.4.2 external 27

2.4.3 插件配置 28

2.5 總結 31

第二部分 組件

第3章 組件的渲染 34

3.1 什麽是vnode 35

3.1.1 普通元素vnode 35

3.1.2 組件vnode 35

3.1.3 vnode 的優勢 36

3.2 如何創建vnode 37

3.3 組件的掛載 41

3.3.1 設置副作用渲染函數 42

3.3.2 渲染組件生成subTree 43

3.3.3 subTree 的掛載 45

3.3.4 普通元素的掛載 46

3.3.5 組件的嵌套掛載 49

3.4 應用程序初始化 50

3.4.1 創建app 對象 50

3.4.2 重寫app.mount 函數 52

3.4.3 執行mount 函數渲染應用 53

3.5 總結 54

第4章 組件的更新 55

4.1 渲染函數更新組件的過程 55

4.2 patch 流程 56

4.2.1 處理組件 58

4.2.2 處理普通元素 61

4.3 核心diff 算法 65

4.3.1 同步頭部節點 66

4.3.2 同步尾部節點 67

4.3.3 添加新的節點 68

4.3.4 刪除多餘節點 69

4.3.5 處理未知子序列 71

4.3.6 移動子節點 73

4.3.7 建立索引圖 74

4.3.8 更新和移除舊節點 75

4.3.9 移動和掛載新節點 78

4.3.10 最長遞增子序列 80

4.4 總結 85

第5章 組件的實例 87

5.1 創建組件實例 87

5.2 設置組件實例 90

5.2.1 創建渲染上下文代理 92

5.2.2 上下文代理的優化 96

5.2.3 處理setup 函數 98

5.2.4 完成組件實例設置 103

5.2.5 兼容Options API 105

5.3 總結 107

第6章 組件的props 108

6.1 props 配置的標準化 109

6.2 props 值的初始化 112

6.2.1 設置props 113

6.2.2 驗證props 117

6.2.3 響應式處理 119

6.3 props 的更新 120

6.3.1 觸發子組件重新渲染 121

6.3.2 更新instance.props 121

6.3.3 把instance.props 變成響應式的 124

6.3.4 對象類型props 數據的更新 125

6.4 總結 128

第7章 組件的生命周期 129

7.1 註冊鉤子函數 130

7.2 onBeforeMount 和onMounted 132

7.3 onBeforeUpdate 和onUpdated 134

7.4 onBeforeUnmount 和onUnmounted 136

7.5 onErrorCaptured 137

7.6 總結 139

第8章 異步組件 140

8.1 defineAsyncComponent 141

8.1.1 渲染占位節點 143

8.1.2 加載異步JavaScript 模塊 144

8.1.3 重新渲染組件 145

8.2 高級用法 145

8.2.1 Loading 組件 146

8.2.2 Error 組件 147

8.3 只加載一次 150

8.4 總結 152

第三部分 響應式原理

第9章 響應式的內部實現原理 154

9.1 響應式對象的實現差異 155

9.2 reactive API 157

9.3 依賴收集 160

9.4 派發通知 164

9.4.1 副作用函數 166

9.4.2 嵌套effect 的場景 168

9.4.3 cleanup 的設計 169

9.5 響應式實現的優化 171

9.5.1 依賴收集的優化 171

9.5.2 trackOpBit 的設計 176

9.6 ref API 177

9.6.1 ref API 的優化 178

9.6.2 unref 180

9.7 shallowReactive API 182

9.8 readonly API 183

9.9 總結 185

第 10章 計算屬性 186

10.1 computed API 186

10.2 計算屬性的運行機制 190

10.3 嵌套計算屬性 193

10.4 總結 193

第 11章 偵聽器 195

11.1 watch API 的用法 196

11.2 watch API 的實現原理 196

11.2.1 標準化source 197

11.2.2 創建job 200

11.2.3 創建scheduler 201

11.2.4 創建effect 202

11.2.5 返回銷毀函數 203

11.3 異步任務隊列的設計 204

11.3.1 異步任務隊列的創建 205

11.3.2 異步任務隊列的執行 208

11.3.3 檢測循環更新 211

11.4 watchEffect API 212

11.5 註冊無效回調函數 215

11.6 偵聽器調試 216

11.7 總結 219

第四部分 編譯和優化

第 12章 模板解析 222

12.1 生成AST 223

12.2 創建解析上下文 226

12.3 解析子節點 227

12.3.1 生成AST 節點數組 228

12.3.2 註釋節點的解析 230

12.3.3 插值的解析 232

12.3.4 普通文本的解析 233

12.3.5 元素節點的解析 234

12.3.6 空白字符處理 238

12.4 創建AST 根節點 240

12.5 總結 240

第 13章 AST 轉換 242

13.1 創建transform 上下文 244

13.2 遍歷AST 節點 246

13.2.1 Element 節點轉換函數 247

13.2.2 表達式節點轉換函數 252

13.2.3 Text 節點轉換函數 254

13.2.4 條件節點轉換函數 258

13.3 靜態提升 266

13.4 創建根節點的代碼生成節點 270

13.5 總結 272

第 14章 生成代碼 273

14.1 創建代碼生成上下文 276

14.2 生成預設代碼 278

14.3 生成渲染函數的名稱和參數 282

14.4 生成資源聲明代碼 283

14.5 生成創建vnode 樹的表達式 285

14.6 運行時優化 298

14.7 總結 302

第五部分 實用特性

第 15章 依賴註入 304

15.1 provide API 305

15.2 inject API 307

15.3 對比模塊化共享數據的方式 308

15.4 依賴註入的缺陷和應用場景 309

15.5 總結 313

第 16章 插槽 314

16.1 插槽的用法 314

16.2 插槽的實現 317

16.2.1 父組件的渲染 317

16.2.2 子組件的渲染 320

16.2.3 作用域插槽 325

16.3 總結 327

第 17章 自定義指令 328

17.1 指令的定義 329

17.2 指令的註冊 330

17.3 指令的應用 331

17.4 總結 337

第 18章 v-model 指令 338

18.1 普通表單元素 338

18.2 自定義組件 342

18.3 自定義事件派發 345

18.4 v-model 修飾符 346

18.4.1 默認修飾符 347

18.4.2 帶參數的修飾符 348

18.5 總結 350

第六部分 內置組件

第 19章 Teleport 組件 352

19.1 Teleport 實現原理 354

19.1.1 組件創建 355

19.1.2 組件更新 357

19.1.3 組件移除 359

19.2 總結 360

第 20章 KeepAlive 組件 362

20.1 組件的渲染 364

20.2 緩存的設計 366

20.3 props 設計 369

20.4 組件的卸載 370

20.5 總結 372

第 21章 Transition 組件 373

21.1 Transition 組件的用法 373

21.2 組件的核心思想 376

21.3 組件的實現原理 377

21.3.1 組件的渲染 380

21.3.2 鉤子函數的執行 381

21.3.3 模式的應用 389

21.4 總結 391

第 22章 TransitionGroup 組件 392

22.1 組件的實現原理 392

22.1.1 組件的渲染 395

22.1.2 move 過渡實現 396

22.2 總結 399

第七部分 官方生態

第 23章 Vue Router 402

23.1 路由的基本用法 402

23.2 路由的實現原理 404

23.2.1 路由對象的創建 404

23.2.2 路由的安裝 404

23.2.3 路徑的管理 406

23.2.4 路徑和路由組件的渲染的映射 413

23.2.5 守衛函數的實現 422

23.2.6 完整的導航解析流程 426

23.3 總結 435

第 24章 Vuex 436

24.1 Vuex 是什麽 436

24.1.1 什麽是“狀態管理模式” 436

24.1.2 Vuex 核心思想 438

24.2 Vuex 初始化 438

24.2.1 創建store 實例 439

24.2.2 初始化模塊 440

24.2.3 安裝模塊 445

24.2.4 重置state 453

24.2.5 Vuex 安裝 456

24.3 API 457

24.3.1 數據獲取 457

24.3.2 數據存儲 459

24.3.3 語法糖 463

24.3.4 動態更新模塊 469

24.4 插件 470

24.5 總結 474