Vue3源码解析，打造自己的Vue3框架

Vue3源码解析，打造自己的Vue3框架

----------------------

下栽地址：https://www.itwangzi.cn/4748.html

----------------------

Vue3源码解析，打造自己的Vue3框架

Vue3 项目结构

• reactivity :响应式系统
• runtime-core :与平台无关的运行时核心(可以创建针对特定台的运行时-自定义染器)
• runtime-dom :针对浏览器的运行时。包括 DOM API，属性，事件处理等
• runtime-test :用于测试
• server-renderer ;用于服务器端渲染
• compiler-core :与平台无关的编译器核心
• compiler-dom :针对浏览器的编译模块
• compiler-ssr :针对服务端渲染的编译模块
• compiler-sfe :针对单文件解析
• size-check :用来测试代码体积
• template-explorer : 用于试编译器输出的开发工具
• shared :多个包之间共享的内容
• vue :完整版本包括运行时和编译器

代码仓库中有个 packages 目录，里面是 Vue 3 的主要功能的实现，包括

• reactivity 目录：数据响应式系统，这是一个单独的系统，可以与任何框架配合使用。
• runtime-core 目录：与平台无关的运行时。其实现的功能有虚拟 DOM 渲染器、Vue 组件和 Vue 的各种API，我们可以利用这个 runtime 实现针对某个具体平台的高阶 runtime，比如自定义渲染器。
• runtime-dom 目录: 针对浏览器的 runtime。其功能包括处理原生 DOM API、DOM 事件和 DOM 属性等。
• runtime-test 目录: 一个专门为了测试而写的轻量级 runtime。由于这个 rumtime 「渲染」出的 DOM 树其实是一个 JS 对象，所以这个 runtime 可以用在所有 JS 环境里。你可以用它来测试渲染是否正确。它还可以用于序列化 DOM、触发 DOM 事件，以及记录某次更新中的 DOM 操作。
• server-renderer 目录: 用于 SSR。尚未实现。
• compiler-core 目录: 平台无关的编译器. 它既包含可扩展的基础功能，也包含所有平台无关的插件。
• shared 目录: 没有暴露任何 API，主要包含了一些平台无关的内部帮助方法。

对于一个组件库来说，除了”组件“本身以外，另个一个非常重要的东西就是文档展示。参考市面上优秀的开源组件库，无一不是既有高质量的组件，更有一套非常规范且详细的文档。文档除了对组件的功能进行说明以外，同时也具备了组件交互预览的能力，让用户的学习成本尽可能地降低。

对于许多程序员来说，最讨厌的无非是两件事。一件是别人不写文档，另一件是自己写文档。既然在组件库里文档是必不可少的，那么我们应该尽可能地减少写文档的痛苦，尤其是这种既要有代码展示、又要有文字说明的文档。

市面上对于组件文档展示的框架也有不少，比如 Story Book、Docz、Dumi 等等。它们都有一套自己的规则能够让你展示自己的组件，但是对于团队来说学习成本较高，同时它们也在一定程度上割裂了“开发”和“写文档”之间的体验。