mini-vue搭建笔记

原理概况

1

https://github.com/cuixiaorui/mini-vue

Vue3模块组织方式

流程图

简单来说

处理编译

compiler-sfc专门解析sfc (使用rollup-vue把App.vue单文件组件编译成JS)

compiler-dom依赖core，处理template标签，把template编译转化成一个render函数

compiler-core给dom提供依赖

处理运行时

runtime-dom依赖core

runtime-core最重点的核心代码

runtime-reactivity实现vue的响应式

更为详细的

runtime-reactivity 响应式系统

提供了诸如 reactive、ref 等 API 来创建响应式对象或变量。 使用 WeakMap 数据结构来跟踪依赖关系，确保当数据变化时能够通知相关的观察者进行更新。 实现了 effect 函数机制，用于自动追踪和触发副作用函数的执行。

runtime-core 跨平台渲染

Vue3 的运行时核心模块，提供了跨平台的渲染能力。它的主要职责包括： 定义了通用的渲染器接口 createRenderer，允许开发者自定义渲染逻辑。 实现了组件生命周期管理、插槽机制以及其他运行时所需的基础功能。 提供了诸如 h 函数这样的工具，用于创建虚拟 DOM 节点。 包含了与平台无关的运行时核心实现（如虚拟 DOM 的渲染器、组件实现和一些全局的 JS API）。

runtime-dom DOM方法

runtime-dom 模块针对浏览器环境实现了具体的运行时逻辑。其主要任务是： 封装了一系列与 DOM 操作相关的实用方法，如创建元素、插入节点等。 提供了一个基于 runtime-core 的默认渲染器实例，用于将虚拟 DOM 节点渲染到真实的 DOM 容器中。 处理特定于浏览器的行为，比如属性绑定、事件监听器添加等。 对原生 DOM API、属性、样式、事件等进行管理。

compiler-sfc 解析.vue组件

compiler-sfc 模块负责解析单文件组件（.vue 文件），它将 .vue 文件中的