本书共分为11章，将从源码角度入手，由浅入深分析Vue3框架的核心逻辑。首先通过极简demo引出Vue3框架核心思想，其次结合源码分析Vue3框架核心逻辑的实现原理，最后介绍Vue3框架常用命令、组件等底层实现逻辑。帮助读者深入理解Vue3框架的内部实现原理与运行逻辑，理解Vue3框架语法，揭开藏在表面的内容，让开发者能知其然还能知其所以然。
本书面向有Vue开发经验和熟悉框架开发的前端开发者，也可以作为对Vue框架源码感兴趣的编程爱好者的参考用书。

目录
第1章 初识Vue3
1.1 Vue3简介
1.2 Vue3的变化
1.2.1 架构变化
1.2.2 代理方式变化
1.2.3 Virtual DOM变化
1.3 Vue3结构
第2章 Vue3入门
2.1 createApp()函数
2.2 参数响应式
2.3 effect副作用函数
2.4 mount()函数
2.5 patch()函数
2.6 总结
第3章 Vue3整体实现
3.1 源码调试
3.1.1 代码调试
3.1.2 开启sourceMap
3.1.3 总结
3.2 createApp()函数
3.2.1 涉及文件
3.2.2 调用createApp()函数
3.2.3 调用createRenderer()函数
3.2.4 总结
3.3 mounted挂载
3.3.1 涉及文件
3.3.2 创建根组件VNode
3.3.3 递归渲染
3.3.4 创建组件上下文实例
3.3.5 patch子树
3.3.6 总结
3.4 setup函数
3.4.1 涉及文件
3.4.2 mountComponent()函数
3.4.3 setupComponent()函数
3.4.4 初始化代理上下文
3.4.5 get方法
3.4.6 set方法
3.4.7 has方法
3.4.8 调用setup函数
3.4.9 finishComponentSetup()函数
3.4.10 总结
3.5 update方法
3.5.1 涉及文件
3.5.2 setupRenderEffect()函数
3.5.3 updateComponentPreRender()函数
3.5.4 updateComponent()函数
3.5.5 shouldUpdateComponent()函数
3.5.6 processElement()函数
3.5.7 patchChildren()函数
3.5.8 总结
3.6 unmount方法
3.6.1 涉及文件
3.6.2 baseCreateRenderer()函数
3.6.3 ref数据
3.6.4 keepalive组件
3.6.5 component组件
3.6.6 suspense组件
3.6.7 telport组件
3.6.8 动态子组件等
3.6.9 总结
第4章 虚拟DOM
4.1 VNode对象
4.1.1 VNode简介
4.1.2 VNode声明
4.1.3 _createVNode()函数
4.1.4 总结
4.2 patch函数
4.2.1 patch介绍
4.2.2 text类型
4.2.3 comment类型
4.2.4 static类型
4.2.5 fragment类型
4.2.6 element类型
4.2.7 component类型
4.2.8 teleport类型
4.2.9 suspense类型
4.3 diff比较
4.3.1 从前往后比较
4.3.2 从后往前比较
4.3.3 新增新VNode
4.3.4 删除旧VNode
4.3.5 进一步判断
4.3.6 总结
第5章 响应式API
5.1 reactive响应式API
5.1.1 使用方式
5.1.2 兼容写法
5.1.3 reactive（）函数
5.1.4 createReactiveObject()函数
5.1.5 mutableHandlers()函数
5.1.6 createGetter()函数
5.1.7 createSetter()函数
5.1.8 ref解析
5.1.9 总结
5.2 effect副作用函数
5.2.1 实现
5.2.2 mount(挂载)
5.2.3 update(更新)
5.2.4 创建effect副作用函数
5.2.5 ReactiveEffect()函数
5.2.6 处理激活状态
5.2.7 清除操作
5.2.8 执行fn
5.2.9 总结
5.3 watch监听
5.3.1 watch函数
5.3.2 初始化
5.3.3 scheduler异步队列
5.3.4 watchEffect()函数
5.3.5 总结
5.4 computed函数
5.4.1 创建getter副作用函数
5.4.2 创建cRef
5.4.3 总结
5.5 拓展方法
5.5.1 customRef()函数
5.5.2 readonly()函数
5.5.3 shallow()函数
5.5.4 shallowReactive()函数
5.5.5 shallowReadonly()函数
5.5.6 总结
第6章 生命周期
6.1 生命周期函数
6.1.1 执行顺序
6.1.2 生命周期实现
6.1.3 injectHook()函数
6.1.4 总结
6.2 挂载回调
6.3 更新回调
6.4 卸载回调
6.5 onErrorCaptured()钩子函数
6.6 onRender钩子函数
第7章 模板编译
7.1 模板渲染
7.2 生成AST对象
7.2.1 初始化解析函数
7.2.2 初始化上下文
7.2.3 根节点对象
7.2.4 标签解析
7.3 AST对象优化
7.3.1 transform（）函数
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.1 Suspense
8.2 teleport
8.3 KeepAlive
8.4 slot
8.5 props
8.6 defineAsyncComponent
8.7 defineComponent（）
8.8 directives
8.9 scheduler
第9章 整体架构
9.1 架构设计
9.2 打包工具
9.3 构建工具
第10章 实战案例
10.1 案例介绍
10.1.1 项目介绍
10.1.2

前言随着前端生态的快速发展，近年来Angular、
Vue、React等JavaScript框架不断涌现，让前端开发
从传统的HTML+CSS+JavaScript开发发展为基于框架的
开发。在众多优秀的框架中，Vue是一套用于构建用户
界面的渐进式框架。与其他大型框架不同的是，Vue 被
设计为可以自底向上逐层应用。
Vue3是Vue的3.x版本，是在Vue2的基础上迭代出
来的大版本，它对整个Vue库进行了重写和升级。Vue3
的变化主要体现在渲染速度的提升、引用方式的改变和
代理逻辑的更新。从使用上看，Vue3兼容Vue2的写法，
开发者能够在很短时间内将Vue2升级到Vue3。随着
Vue3的逐渐流行，市面上出现很多Vue3相关书籍，这类
书籍大部分围绕如何以Vue3作为开发框架实现项目展开
，对Vue3的底层实现和运行原理较少介绍。基于此，我
们编写了本书。
本书以实现简单框架为案例，由浅入深介绍Vue3中
的各个模块及其实现细节，帮助开发者从源码角度学习
并理解Vue3中各组件和API的实现逻辑。本书可以帮助
开发者在使用框架的同时了解内部原理，让开发者知其
然也知其所以然。
本书围绕Vue3框架源码展开，由浅入深，帮助读者
从不同角度深入学习Vue3。全书共10章，其中第1～3章
从整体逻辑角度介绍Vue3的实现过程； 第4～7章从细
节角度介绍Vue3的虚拟DOM、响应式API、生命周期和模
板编译的实现逻辑； 第8～10章从使用角度入手，介绍
常用组件和API实现原理、整体架构和项目实战中的实
现。
为便于读者高效学习，快速掌握Vue3源码框架原理
，本书作者精心制作了完整的微课视频和完整的源代码
，并提供在线答疑服务。
本书适合作为计算机相关专业的教辅书，也可以作
为前端开发者的自学参考书。
配套案例
本书由张廷杭、仲宝才、姚鑫编著。其中，第1、2
章由姚鑫编写，第3～6章由张廷杭编写，第7～10章由
仲宝才编写。姚鑫负责配套系统的设计工作，张廷杭负
责配套系统的开发工作，仲宝才负责全文的审校工作。
由于时间仓促、编者水平有限，书中难免存在疏漏
与不妥之处，恳请广大读者批评指正。
编者2023年3月

Vue3是Vue的3.x版本，是在Vue 2.x的基础上迭代出来的“大”版本，它对整个Vue库进行了重写和升级。与Vue2相比，虽然Vue3的核心逻辑变化不大，但是针对包架构进行了升级，由原来的options API挂载原型的方式变为composition API方式，从而实现各核心库的解耦，使得Vue3的内部核心模块可以按需加载。
本书帮助广大读者在使用Vue3的过程中理解实现原理，学习Vue3实现逻辑。通过对Vue3运行原理的解析，帮助读者理解核心源码的实现。本书由浅入深展开以下内容：
? Vue3概述；
? Vue3整体实现；
? 虚拟DOM；
? 响应式API；
? 生命周期；
? 模板编译；
? 组件和API实现；
? 整体架构；
? 实战案例。
本书配有视频、课件、大纲和代码。

第3章〓Vue3整体实现
本章将通过对源码的调试，介绍Vue3的整体实现。本章内容是第2章内容的延伸，核心逻辑与第2章基本相同。读者可以将两章内容对照进行学习。读者可以跟随本章的内容学习源码调试方法，简单理解Vue3的运行原理。
观看视频速览本章主要内容。
视频讲解
3.1源码调试◆
(1) 基础环境： npm、node、vscode；
(2) 下载源码；
git clone git@github.com:vuejs/vue-next.git
注： git@github.com为ssh下载，若未设置免密，则可使用HTTPS下载。
(3) 安装项目依赖；
(4) 安装yarn插件；
npm install yarn -g
(5) 安装依赖；
yarn install
安装依赖时，如果提示需安装pnpm，则会在执行时提示“This repository requires using pnpm as the package manager for scripts to work properly.”，如图3.1所示。pnpm命令可以通过npm安装。
图3.1报错信息
(6) 安装pnpm；
npm install -g pnpm
使用pnpm时需注意，pnpm命令对node版本有依赖，例如，在本地执行pnpm时，提示node版本过低，此时需要升级node版本，以支持依赖，提示信息如图3.2所示。
图3.2提示信息
(7) 升级node版本。
本书的操作环境安装有nvm，可以直接切换多个版本node，关于node升级此处不过多介绍，完成node版本升级后，通过pnpm安装依赖。
图3.3打包结果
3.1.1代码调试
依赖包安装完成后即可运行vue代码，执行npm run build打包最新的代码。完成打包后可以在packages/vue/dist内找到对应文件，打包结果如图3.3所示。
完成打包后，新建html文件并引入编译好的vue.global.js文件，在html文件内实现简单的内容： 渲染一个按钮和提示语，单击按钮后可以反转提示语的字母位置。该demo实现十分简单，但是通过该操作可以帮助读者探究Vue3内部运行原理，覆盖Vue3的核心逻辑。整体代码如下：

reactive

上述代码使用了Vue3的createApp()函数和 3.3mounted挂载◆
3.3.1涉及文件
mounted挂载涉及文件路径如表3.2所示。
表3.2mounted挂载涉及文件路径
名称简 写 路 径文 件 路 径
mount$runtimecore_apiCreateApp$root/packages/runtimecore/src/apiCreateApp.ts
processComponent$runtimecore_renderer$root/packages/runtimecore/src/renderer.ts
setupComponent$runtimecore_components$root/packages/runtimecore/src/component.ts
setupStatefulComponent$runtimecore_components$root/packages/runtimecore/src/component.ts
finishComponentSetup$runtimecore_components$root/packages/runtimecore/src/component.ts
本节将详细介绍Vue3中mounted挂载时的整体流程，通过该流程了解组件挂载的详细情况。下面对涉及的虚拟DOM和VNode的相关知识进行简单介绍。
mount(挂载)内部将VNode转换为真实的DOM结构再挂载到DOM根节点内，mount的调用在createApp函数内已有简单介绍，对render函数的作用也有一定了解，本节将继续围绕该内容展开介绍。
虚拟DOM本质是通过JavaScript对象描述真实DOM的结构和属性。因为在DOM操作的过程中会涉及页面的重绘和回流，所以引入虚拟DOM减少对DOM对象的操作，降低性能损耗。如果只是对页面内某个极小部分修改就造成整个DOM树的重绘，那么会有极大的性能损耗。虚拟DOM概念从Vue2开始引入，在真实操作DOM前对需要修改的内容进行判断，保证只有DOM结构的最小化修改，减少重绘和回流的次数，以达到节约性能损耗的目的。在Vue3中依然保留虚拟DOM，并且对其进行大幅度