目錄 第 一部分 Vue.js 的整體設(shè)計(jì) 第 1章 Vue.js 3.x 的優(yōu)化 2 1.1 源碼優(yōu)化 2 1.1.1 monorepo 2 1.1.2 TypeScript 3 1.2 性能優(yōu)化 4 1.2.1 源碼體積優(yōu)化 4 1.2.2 數(shù)據(jù)劫持優(yōu)化 5 1.2.3 編譯優(yōu)化 7 1.3 語法API 優(yōu)化 9 1.3.1 優(yōu)化邏輯組織 9 1.3.2 優(yōu)化邏輯復(fù)用 12 1.4 引入RFC 14 1.5 總結(jié) 14 第 2章 Vue.js 3.x 源碼總覽 15 2.1 源碼目錄結(jié)構(gòu) 15 2.2 不同構(gòu)建版本Vue.js 的使用場景 18 2.2.1 Runtime-only 與 Runtime + Compiler 19 2.2.2 CDN 直接使用 19 2.2.3 配合打包工具使用 20 2.2.4 服務(wù)端渲染使用 20 2.3 編譯構(gòu)建 21 2.3.1 收集編譯目標(biāo) 21 2.3.2 并行編譯 21 2.3.3 單個(gè)編譯 22 2.4 rollup 配置 23 2.4.1 輸入與輸出 24 2.4.2 external 27 2.4.3 插件配置 28 2.5 總結(jié) 31 第二部分 組件 第3章 組件的渲染 34 3.1 什么是vnode 35 3.1.1 普通元素vnode 35 3.1.2 組件vnode 35 3.1.3 vnode 的優(yōu)勢(shì) 36 3.2 如何創(chuàng)建vnode 37 3.3 組件的掛載 41 3.3.1 設(shè)置副作用渲染函數(shù) 42 3.3.2 渲染組件生成subTree 43 3.3.3 subTree 的掛載 45 3.3.4 普通元素的掛載 46 3.3.5 組件的嵌套掛載 49 3.4 應(yīng)用程序初始化 50 3.4.1 創(chuàng)建app 對(duì)象 50 3.4.2 重寫app.mount 函數(shù) 52 3.4.3 執(zhí)行mount 函數(shù)渲染應(yīng)用 53 3.5 總結(jié) 54 第4章 組件的更新 55 4.1 渲染函數(shù)更新組件的過程 55 4.2 patch 流程 56 4.2.1 處理組件 58 4.2.2 處理普通元素 61 4.3 核心diff 算法 65 4.3.1 同步頭部節(jié)點(diǎn) 66 4.3.2 同步尾部節(jié)點(diǎn) 67 4.3.3 添加新的節(jié)點(diǎn) 68 4.3.4 刪除多余節(jié)點(diǎn) 69 4.3.5 處理未知子序列 71 4.3.6 移動(dòng)子節(jié)點(diǎn) 73 4.3.7 建立索引圖 74 4.3.8 更新和移除舊節(jié)點(diǎn) 75 4.3.9 移動(dòng)和掛載新節(jié)點(diǎn) 78 4.3.10 最長遞增子序列 80 4.4 總結(jié) 85 第5章 組件的實(shí)例 87 5.1 創(chuàng)建組件實(shí)例 87 5.2 設(shè)置組件實(shí)例 90 5.2.1 創(chuàng)建渲染上下文代理 92 5.2.2 上下文代理的優(yōu)化 96 5.2.3 處理setup 函數(shù) 98 5.2.4 完成組件實(shí)例設(shè)置 103 5.2.5 兼容Options API 105 5.3 總結(jié) 107 第6章 組件的props 108 6.1 props 配置的標(biāo)準(zhǔn)化 109 6.2 props 值的初始化 112 6.2.1 設(shè)置props 113 6.2.2 驗(yàn)證props 117 6.2.3 響應(yīng)式處理 119 6.3 props 的更新 120 6.3.1 觸發(fā)子組件重新渲染 121 6.3.2 更新instance.props 121 6.3.3 把instance.props 變成響應(yīng)式的 124 6.3.4 對(duì)象類型props 數(shù)據(jù)的更新 125 6.4 總結(jié) 128 第7章 組件的生命周期 129 7.1 注冊(cè)鉤子函數(shù) 130 7.2 onBeforeMount 和onMounted 132 7.3 onBeforeUpdate 和onUpdated 134 7.4 onBeforeUnmount 和onUnmounted 136 7.5 onErrorCaptured 137 7.6 總結(jié) 139 第8章 異步組件 140 8.1 defineAsyncComponent 141 8.1.1 渲染占位節(jié)點(diǎn) 143 8.1.2 加載異步JavaScript 模塊 144 8.1.3 重新渲染組件 145 8.2 高級(jí)用法 145 8.2.1 Loading 組件 146 8.2.2 Error 組件 147 8.3 只加載一次 150 8.4 總結(jié) 152 第三部分 響應(yīng)式原理 第9章 響應(yīng)式的內(nèi)部實(shí)現(xiàn)原理 154 9.1 響應(yīng)式對(duì)象的實(shí)現(xiàn)差異 155 9.2 reactive API 157 9.3 依賴收集 160 9.4 派發(fā)通知 164 9.4.1 副作用函數(shù) 166 9.4.2 嵌套effect 的場景 168 9.4.3 cleanup 的設(shè)計(jì) 169 9.5 響應(yīng)式實(shí)現(xiàn)的優(yōu)化 171 9.5.1 依賴收集的優(yōu)化 171 9.5.2 trackOpBit 的設(shè)計(jì) 176 9.6 ref API 177 9.6.1 ref API 的優(yōu)化 178 9.6.2 unref 180 9.7 shallowReactive API 182 9.8 readonly API 183 9.9 總結(jié) 185 第 10章 計(jì)算屬性 186 10.1 computed API 186 10.2 計(jì)算屬性的運(yùn)行機(jī)制 190 10.3 嵌套計(jì)算屬性 193 10.4 總結(jié) 193 第 11章 偵聽器 195 11.1 watch API 的用法 196 11.2 watch API 的實(shí)現(xiàn)原理 196 11.2.1 標(biāo)準(zhǔn)化source 197 11.2.2 創(chuàng)建job 200 11.2.3 創(chuàng)建scheduler 201 11.2.4 創(chuàng)建effect 202 11.2.5 返回銷毀函數(shù) 203 11.3 異步任務(wù)隊(duì)列的設(shè)計(jì) 204 11.3.1 異步任務(wù)隊(duì)列的創(chuàng)建 205 11.3.2 異步任務(wù)隊(duì)列的執(zhí)行 208 11.3.3 檢測(cè)循環(huán)更新 211 11.4 watchEffect API 212 11.5 注冊(cè)無效回調(diào)函數(shù) 215 11.6 偵聽器調(diào)試 216 11.7 總結(jié) 219 第四部分 編譯和優(yōu)化 第 12章 模板解析 222 12.1 生成AST 223 12.2 創(chuàng)建解析上下文 226 12.3 解析子節(jié)點(diǎn) 227 12.3.1 生成AST 節(jié)點(diǎn)數(shù)組 228 12.3.2 注釋節(jié)點(diǎn)的解析 230 12.3.3 插值的解析 232 12.3.4 普通文本的解析 233 12.3.5 元素節(jié)點(diǎn)的解析 234 12.3.6 空白字符處理 238 12.4 創(chuàng)建AST 根節(jié)點(diǎn) 240 12.5 總結(jié) 240 第 13章 AST 轉(zhuǎn)換 242 13.1 創(chuàng)建transform 上下文 244 13.2 遍歷AST 節(jié)點(diǎn) 246 13.2.1 Element 節(jié)點(diǎn)轉(zhuǎn)換函數(shù) 247 13.2.2 表達(dá)式節(jié)點(diǎn)轉(zhuǎn)換函數(shù) 252 13.2.3 Text 節(jié)點(diǎn)轉(zhuǎn)換函數(shù) 254 13.2.4 條件節(jié)點(diǎn)轉(zhuǎn)換函數(shù) 258 13.3 靜態(tài)提升 266 13.4 創(chuàng)建根節(jié)點(diǎn)的代碼生成節(jié)點(diǎn) 270 13.5 總結(jié) 272 第 14章 生成代碼 273 14.1 創(chuàng)建代碼生成上下文 276 14.2 生成預(yù)設(shè)代碼 278 14.3 生成渲染函數(shù)的名稱和參數(shù) 282 14.4 生成資源聲明代碼 283 14.5 生成創(chuàng)建vnode 樹的表達(dá)式 285 14.6 運(yùn)行時(shí)優(yōu)化 298 14.7 總結(jié) 302 第五部分 實(shí)用特性 第 15章 依賴注入 304 15.1 provide API 305 15.2 inject API 307 15.3 對(duì)比模塊化共享數(shù)據(jù)的方式 308 15.4 依賴注入的缺陷和應(yīng)用場景 309 15.5 總結(jié) 313 第 16章 插槽 314 16.1 插槽的用法 314 16.2 插槽的實(shí)現(xiàn) 317 16.2.1 父組件的渲染 317 16.2.2 子組件的渲染 320 16.2.3 作用域插槽 325 16.3 總結(jié) 327 第 17章 自定義指令 328 17.1 指令的定義 329 17.2 指令的注冊(cè) 330 17.3 指令的應(yīng)用 331 17.4 總結(jié) 337 第 18章 v-model 指令 338 18.1 普通表單元素 338 18.2 自定義組件 342 18.3 自定義事件派發(fā) 345 18.4 v-model 修飾符 346 18.4.1 默認(rèn)修飾符 347 18.4.2 帶參數(shù)的修飾符 348 18.5 總結(jié) 350 第六部分 內(nèi)置組件 第 19章 Teleport 組件 352 19.1 Teleport 實(shí)現(xiàn)原理 354 19.1.1 組件創(chuàng)建 355 19.1.2 組件更新 357 19.1.3 組件移除 359 19.2 總結(jié) 360 第 20章 KeepAlive 組件 362 20.1 組件的渲染 364 20.2 緩存的設(shè)計(jì) 366 20.3 props 設(shè)計(jì) 369 20.4 組件的卸載 370 20.5 總結(jié) 372 第 21章 Transition 組件 373 21.1 Transition 組件的用法 373 21.2 組件的核心思想 376 21.3 組件的實(shí)現(xiàn)原理 377 21.3.1 組件的渲染 380 21.3.2 鉤子函數(shù)的執(zhí)行 381 21.3.3 模式的應(yīng)用 389 21.4 總結(jié) 391 第 22章 TransitionGroup 組件 392 22.1 組件的實(shí)現(xiàn)原理 392 22.1.1 組件的渲染 395 22.1.2 move 過渡實(shí)現(xiàn) 396 22.2 總結(jié) 399 第七部分 官方生態(tài) 第 23章 Vue Router 402 23.1 路由的基本用法 402 23.2 路由的實(shí)現(xiàn)原理 404 23.2.1 路由對(duì)象的創(chuàng)建 404 23.2.2 路由的安裝 404 23.2.3 路徑的管理 406 23.2.4 路徑和路由組件的渲染的映射 413 23.2.5 守衛(wèi)函數(shù)的實(shí)現(xiàn) 422 23.2.6 完整的導(dǎo)航解析流程 426 23.3 總結(jié) 435 第 24章 Vuex 436 24.1 Vuex 是什么 436 24.1.1 什么是“狀態(tài)管理模式” 436 24.1.2 Vuex 核心思想 438 24.2 Vuex 初始化 438 24.2.1 創(chuàng)建store 實(shí)例 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 數(shù)據(jù)獲取 457 24.3.2 數(shù)據(jù)存儲(chǔ) 459 24.3.3 語法糖 463 24.3.4 動(dòng)態(tài)更新模塊 469 24.4 插件 470 24.5 總結(jié) 474