本書共分為11章，將從源碼角度入手，由淺入深分析Vue3框架的核心邏輯。首先通過極簡(jiǎn)demo引出Vue3框架核心思想，其次結(jié)合源碼分析Vue3框架核心邏輯的實(shí)現(xiàn)原理，后介紹Vue3框架常用命令、組件等底層實(shí)現(xiàn)邏輯。幫助讀者深入理解Vue3框架的內(nèi)部實(shí)現(xiàn)原理與運(yùn)行邏輯，理解Vue3框架語法，揭開藏在表面的內(nèi)容，讓開發(fā)者能知其然還能知其所以然。 本書面向有Vue開發(fā)經(jīng)驗(yàn)和熟悉框架開發(fā)的前端開發(fā)者，也可以作為對(duì)Vue框架源碼感興趣的編程愛好者的參考用書。

Vue3是Vue的3.x版本，是在Vue 2.x的基礎(chǔ)上迭代出來的大版本，它對(duì)整個(gè)Vue庫進(jìn)行了重寫和升級(jí)。與Vue2相比，雖然Vue3的核心邏輯變化不大，但是針對(duì)包架構(gòu)進(jìn)行了升級(jí)，由原來的options API掛載原型的方式變?yōu)閏omposition API方式，從而實(shí)現(xiàn)各核心庫的解耦，使得Vue3的內(nèi)部核心模塊可以按需加載。
本書幫助廣大讀者在使用Vue3的過程中理解實(shí)現(xiàn)原理，學(xué)習(xí)Vue3實(shí)現(xiàn)邏輯。通過對(duì)Vue3運(yùn)行原理的解析，幫助讀者理解核心源碼的實(shí)現(xiàn)。本書由淺入深展開以下內(nèi)容：

? Vue3概述；
? Vue3整體實(shí)現(xiàn)；
? 虛擬DOM；
? 響應(yīng)式API；
? 生命周期；
? 模板編譯；
? 組件和API實(shí)現(xiàn)；
? 整體架構(gòu)；
? 實(shí)戰(zhàn)案例。
本書配有視頻、課件、大綱和代碼。

隨著前端生態(tài)的快速發(fā)展，近年來Angular、Vue、React等JavaScript框架不斷涌現(xiàn)，讓前端開發(fā)從傳統(tǒng)的HTML CSS JavaScript開發(fā)發(fā)展為基于框架的開發(fā)。在眾多優(yōu)秀的框架中，Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其他大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。

Vue3是Vue的3.x版本，是在Vue2的基礎(chǔ)上迭代出來的大版本，它對(duì)整個(gè)Vue庫進(jìn)行了重寫和升級(jí)。Vue3的變化主要體現(xiàn)在渲染速度的提升、引用方式的改變和代理邏輯的更新。從使用上看，Vue3兼容Vue2的寫法，開發(fā)者能夠在很短時(shí)間內(nèi)將Vue2升級(jí)到Vue3。隨著Vue3的逐漸流行，市面上出現(xiàn)很多Vue3相關(guān)書籍，這類書籍大部分圍繞如何以Vue3作為開發(fā)框架實(shí)現(xiàn)項(xiàng)目展開，對(duì)Vue3的底層實(shí)現(xiàn)和運(yùn)行原理較少介紹�；�于此，我們編寫了本書。

本書以實(shí)現(xiàn)簡(jiǎn)單框架為案例，由淺入深介紹Vue3中的各個(gè)模塊及其實(shí)現(xiàn)細(xì)節(jié)，幫助開發(fā)者從源碼角度學(xué)習(xí)并理解Vue3中各組件和API的實(shí)現(xiàn)邏輯。本書可以幫助開發(fā)者在使用框架的同時(shí)了解內(nèi)部原理，讓開發(fā)者知其然也知其所以然。

本書圍繞Vue3框架源碼展開，由淺入深，幫助讀者從不同角度深入學(xué)習(xí)Vue3。全書共10章，其中第1～3章從整體邏輯角度介紹Vue3的實(shí)現(xiàn)過程； 第4～7章從細(xì)節(jié)角度介紹Vue3的虛擬DOM、響應(yīng)式API、生命周期和模板編譯的實(shí)現(xiàn)邏輯； 第8～10章從使用角度入手，介紹常用組件和API實(shí)現(xiàn)原理、整體架構(gòu)和項(xiàng)目實(shí)戰(zhàn)中的實(shí)現(xiàn)。

為便于讀者高效學(xué)習(xí)，快速掌握Vue3源碼框架原理，本書作者精心制作了完整的微課視頻和完整的源代碼，并提供在線答疑服務(wù)。

本書適合作為計(jì)算機(jī)相關(guān)專業(yè)的教輔書，也可以作為前端開發(fā)者的自學(xué)參考書。

配套案例

本書由張廷杭、仲寶才、姚鑫編著。其中，第1、2章由姚鑫編寫，第3～6章由張廷杭編寫，第7～10章由仲寶才編寫。姚鑫負(fù)責(zé)配套系統(tǒng)的設(shè)計(jì)工作，張廷杭負(fù)責(zé)配套系統(tǒng)的開發(fā)工作，仲寶才負(fù)責(zé)全文的審校工作。

由于時(shí)間倉(cāng)促、編者水平有限，書中難免存在疏漏與不妥之處，懇請(qǐng)廣大讀者批評(píng)指正。

編者2023年3月

張廷杭 中國(guó)移動(dòng)通信集團(tuán)有限公司系統(tǒng)開發(fā)工程師，長(zhǎng)期從事微信小程序、Web前端開發(fā)等工作，對(duì)微信小程序、HTML5和Vue前端開發(fā)框架等有深入研究。

第1章初識(shí)Vue3

1.1Vue3簡(jiǎn)介

1.2Vue3的變化

1.2.1架構(gòu)變化

1.2.2代理方式變化

1.2.3Virtual DOM變化

1.3Vue3結(jié)構(gòu)

第2章Vue3入門

2.1createApp()函數(shù)

2.2參數(shù)響應(yīng)式

2.3effect副作用函數(shù)

2.4mount()函數(shù)

2.5patch()函數(shù)

2.6總結(jié)

第3章Vue3整體實(shí)現(xiàn)

3.1源碼調(diào)試

3.1.1代碼調(diào)試

3.1.2開啟sourceMap

3.1.3總結(jié)

3.2createApp()函數(shù)

3.2.1涉及文件

3.2.2調(diào)用createApp()函數(shù)

3.2.3調(diào)用createRenderer()函數(shù)

3.2.4總結(jié)

3.3mounted掛載

3.3.1涉及文件

3.3.2創(chuàng)建根組件VNode

3.3.3遞歸渲染

3.3.4創(chuàng)建組件上下文實(shí)例

3.3.5patch子樹

3.3.6總結(jié)

3.4setup函數(shù)

3.4.1涉及文件

3.4.2mountComponent()函數(shù)

3.4.3setupComponent()函數(shù)

3.4.4初始化代理上下文

3.4.5get方法

3.4.6set方法

3.4.7has方法

3.4.8調(diào)用setup函數(shù)

3.4.9finishComponentSetup()函數(shù)

3.4.10總結(jié)

3.5update方法

3.5.1涉及文件

3.5.2setupRenderEffect()函數(shù)

3.5.3updateComponentPreRender()函數(shù)

3.5.4updateComponent()函數(shù)

3.5.5shouldUpdateComponent()函數(shù)

3.5.6processElement()函數(shù)

3.5.7patchChildren()函數(shù)

3.5.8總結(jié)

3.6unmount方法

3.6.1涉及文件

3.6.2baseCreateRenderer()函數(shù)

3.6.3ref數(shù)據(jù)

3.6.4keepalive組件

3.6.5component組件

3.6.6suspense組件

3.6.7telport組件

3.6.8動(dòng)態(tài)子組件等

3.6.9總結(jié)

第4章虛擬DOM

4.1VNode對(duì)象

4.1.1VNode簡(jiǎn)介

4.1.2VNode聲明

4.1.3_createVNode()函數(shù)

4.1.4總結(jié)

4.2patch函數(shù)

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進(jìn)一步判斷

4.3.6總結(jié)

第5章響應(yīng)式API

5.1reactive響應(yīng)式API

5.1.1使用方式

5.1.2兼容寫法

5.1.3reactive（）函數(shù)

5.1.4createReactiveObject()函數(shù)

5.1.5mutableHandlers()函數(shù)

5.1.6createGetter()函數(shù)

5.1.7createSetter()函數(shù)

5.1.8ref解析

5.1.9總結(jié)

5.2effect副作用函數(shù)

5.2.1實(shí)現(xiàn)

5.2.2mount(掛載)

5.2.3update(更新)

5.2.4創(chuàng)建effect副作用函數(shù)

5.2.5ReactiveEffect()函數(shù)

5.2.6處理激活狀態(tài)

5.2.7清除操作

5.2.8執(zhí)行fn

5.2.9總結(jié)

5.3watch監(jiān)聽

5.3.1watch函數(shù)

5.3.2初始化

5.3.3scheduler異步隊(duì)列

5.3.4watchEffect()函數(shù)

5.3.5總結(jié)

5.4computed函數(shù)

5.4.1創(chuàng)建getter副作用函數(shù)

5.4.2創(chuàng)建cRef

5.4.3總結(jié)

5.5拓展方法

5.5.1customRef()函數(shù)

5.5.2readonly()函數(shù)

5.5.3shallow()函數(shù)

5.5.4shallowReactive()函數(shù)

5.5.5shallowReadonly()函數(shù)

5.5.6總結(jié)

第6章生命周期

6.1生命周期函數(shù)

6.1.1執(zhí)行順序

6.1.2生命周期實(shí)現(xiàn)

6.1.3injectHook()函數(shù)

6.1.4總結(jié)

6.2掛載回調(diào)

6.3更新回調(diào)

6.4卸載回調(diào)

6.5onErrorCaptured()鉤子函數(shù)

6.6onRender鉤子函數(shù)

第7章模板編譯

7.1模板渲染

7.2生成AST對(duì)象

7.2.1初始化解析函數(shù)

7.2.2初始化上下文

7.2.3根節(jié)點(diǎn)對(duì)象

7.2.4標(biāo)簽解析

7.3AST對(duì)象優(yōu)化

7.3.1transform（）函數(shù)

7.3.2靜態(tài)變量提升

7.4生成代碼字符串

7.4.1創(chuàng)建模板字符串上下文

7.4.2生成引用函數(shù)

7.4.3生成函數(shù)簽名

7.4.4判斷是否需要with函數(shù)擴(kuò)展作用域

7.4.5資源分解處理

7.4.6生成節(jié)點(diǎn)代碼字符串

7.4.7返回代碼字符串

7.5生成render函數(shù)

7.6位運(yùn)算

第8章組件和API實(shí)現(xiàn)

8.1Suspense

8.2teleport

8.3KeepAlive

8.4slot

8.5props

8.6defineAsyncComponent

8.7defineComponent（）

8.8directives

8.9scheduler

第9章整體架構(gòu)

9.1架構(gòu)設(shè)計(jì)

9.2打包工具

9.3構(gòu)建工具

第10章實(shí)戰(zhàn)案例

10.1案例介紹

10.1.1項(xiàng)目介紹

10.1.2知識(shí)點(diǎn)介紹

10.2Vue3核心實(shí)戰(zhàn)

10.2.1登錄頁面

10.2.2注冊(cè)頁面

10.3Vue3模板編譯實(shí)戰(zhàn)

10.3.1首頁頁面

10.3.2個(gè)人資料頁面

10.4Vue3功能實(shí)戰(zhàn)

10.4.1寫作頁面

10.4.2個(gè)人主頁

參考文獻(xiàn)