vue3 源码系列

在首次渲染过程中，完成根组件实例的挂载后，获取template的虚拟DOM，将其传入patch函数中，递归渲染子元素。在子元素的渲染过程中，会首先创建节点，然后创建当前节点的子元素。

createApp做了两件事情：调用ensureRenderer函数获取渲染器，然后执行渲染器的 createApp 方法创建app应用实例。获取app应用实例的mount方法，对其进行扩展。

createApp做了两件事情：调用ensureRenderer函数获取渲染器，执行createApp方法创建app应用实例。取出app上的mount方法，对其进行扩展。并创建VNode

compiler 模块是在编译阶段将.vue文件编译成浏览器能识别的.html文件。runtime模块则是在运行阶段对DOM进行一系列处理。reactivity 模块则是vue中的响应式处理。

vue3源码调试，启动 sourceMap，静态页面调试源码，创建本地服务调试源码，手动debugger。

快速 Diff 算法，借鉴了文本 Diff 中的预处理思路，先处理新旧两组子节点中相同的前置节点和相同的后置节点。

Transition 组件的核心原理可以总结为：在DOM元素挂载时，将动效附加到DOM元素上，而在卸载DOM元素之前，等到附加到DOM元素上的动效执行完成后再卸载DOM元素。

Teleport 组件在挂载时会根据<teleport>的功能是否禁用从而将其挂载到对应挂载点中。在更新时根据<teleport>的功能是否被禁用及t 属性值是否发生变化，从而将其移动到对应挂载点。

KeepLive 组件的作用类似于 HTTP 中的持久链接。它可以避免组件实例不断地被销毁和重建。当被 KeepAlive 的组件在卸载的时候，会将该组件搬运到一个隐藏的容器中。

JavaScript AST 转换器 transform 在编译器的编译过程中负责将 模板AST 转换为 JavaScript AST。

静态提升，就是指在编译器编译的过程中，将一些静态的节点或属性提升到渲染函数之外。它能够减少更新时创建虚拟 DOM 带来的性能开销和内存占用。

Vue 在追踪变化时，通过 track 函数收集依赖，即将副作用函数添加到 targetMap 中，通过 trigger 函数来执行对应的副作用函来完成更新。

watch 的本质就是观测一个响应式数据，当数据发生变化时通知并执行相应的回调函数。watch的实现利用了effect 和 options.scheduler 选项。

computed是一个懒执行的副作用函数，通过 _dirty 标志使得副作用函数可以懒执行。dirty 标志用来表示是否需要重新计算值，当需要计算属性需要重新计算时，则重新执行副作用。

ref 本质上是一个 “包裹对象”，因为 ES6 的 Proxy 无法提供对原始值的代理，所以需要使用一层对象作为包裹，间接实现原始值的响应式方案。

Vue.js 3 中的响应式数据是基于 ES6 中的Proxy实现的，Proxy除了可以代理Object、Array、还可以代理ES6中新增的Map、Set、WeakMap、WeakSet等集合。

解析器在解析模板过程中，无论是解析文本节点、插值节点还是标签的属性值，最终都会调用 decodeHtml 函数来解码文本内容中可能存在的HTML实体。

模板AST 解析器 parser 本质上就是一个状态机。它在编译器的编译过程中负责将 模板字符串 解析为 模板AST。

代码生成器 generate 在编译器的编译过程中负责将 JavaScript AST 转换成渲染函。代码生成本质上是字符串拼接的艺术。