代码仓库结构

在 Vue3 的代码仓库中，有一个名为 packages 的目录。这个目录包含了 Vue3 主要功能的实现，包括：

• vue ：Vue3 的核心库
• compiler-dom ：用于编译 DOM 模板的编译器
• compiler-sfc ：用于编译单文件组件的编译器
• reactivity ：Vue3 的响应式系统
• runtime-core ：Vue3 的运行时核心
• runtime-dom ：Vue3 的 DOM 运行时

组件库文档展示

对于一个组件库来说，除了组件本身以外，另一个非常重要的东西就是文档展示。参考市面上优秀的开源组件库，无一不是既有高质量的组件，更有一套非常规范且详细的文档。

文档除了对组件的功能进行说明以外，同时也具备了组件交互预览的能力，让用户的学习成本尽可能地降低。

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

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

vue 3 的源码如何分析？

Vue 3 的源码分析可以从以下几个方面入手： 1. Vue 3 的架构设计，包括响应式系统、编译器、渲染器等。 2. Vue 3 的核心实现，包括组件、指令、过滤器等。 3. Vue 3 的异步渲染机制，包括异步组件、Suspense 等。 4. Vue 3 的性能优化，包括静态节点、动态节点等。

vue3源码分析-实现props,emit，事件处理等

本期来实现， setup里面使用props,父子组件通信props和emit等 ，所有的源码请查看

在render函数中， 可以通过this,来访问setup返回的内容，还可以访问this.$el等

由于是测试dom,jest需要提前注入下面的内容，让document里面有app节点，下面测试用例类似在html中定义一个app节点哦

本功能的测试用例正式开始

上面的测试用例

解决这两个需求:

针对上面的分析，需要在setupStatefulComponent中来创建proxy并且绑定到instance当中,并且setup的执行结果如果是对象，也已经存在instance中了，可以通过来进行获取

通过上面的操作，从render中获取setup返回对象的内容就ok了，接下来处理el

需要在mountElement中，创建节点的时候，在vnode中绑定下，el，并且在setupStatefulComponent 中的代理对象中判断当前的key

看似没有问题吧，但是实际上是有问题的，请仔细思考一下， mountElement是不是比setupStatefulComponent 后执行，setupStatefulComponent执行的时候，不存在，后续mountelement的时候，vnode就会有值，那么上面的测试用例肯定是报错的，$el为null

解决这个问题的关键，mountElement的加载顺序是 render -> patch -> mountElement，并且render函数返回的subtree是一个vnode,改vnode中上面是mount的时候，已经赋值好了el,所以在patch后执行下操作

在vue中，可以使用onEvent来写事件，那么这个功能是怎么实现的呢，咋们一起来看看

在本功能的测试用例中，可以分析以下内容：

解决问题:

这个功能比较简单，在处理prop中做个判断， 属性是否满足 /^on[A-Z]/i这个格式，如果是这个格式，则进行事件注册，但是vue3会做事件缓存，这个是怎么做到？

缓存也好实现，在传入当前的el中增加一个属性 el._vei || (el._vei = {}) 存在这里，则直接使用，不能存在则创建并且存入缓存

事件处理就ok啦

父子组件通信，在vue中是非常常见的，这里主要实现props与emit

根据上面的测试用例，分析props的以下内容：

解决问题：

问题1： 想要在子组件的setup函数中第一个参数， 使用props,那么在setup函数调用的时候，把当前组件的props传入到setup函数中即可问题2： render中this想要问题，则在上面的那个代理中，在 加入一个判断，key是否在当前instance的props中问题3： 修改报错，那就是只能读，可以使用以前实现的 api shallowReadonly来包裹一下 既可

做完之后，可以发现咋们的测试用例是运行没有毛病的

上面实现了props,那么emit也是少不了的，那么接下来就来实现下emit

根据上面的测试用例，可以分析出：

解决办法： 问题1： emit 是setup的第二个参数， 那么可以在setup函数调用的时候，传入第二个参数问题2： 关于emit的第一个参数， 可以做条件判断，把xxx-xxx的形式转成xxxXxx的形式，然后加入on，最后在props中取找，存在则调用，不存在则不调用问题3：emit的第二个参数， 则使用剩余参数即可

到此就圆满成功啦！