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

Posted 2023-03-02

参考技术A

>

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

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

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

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

上面的测试用例

解决这两个需求:

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

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

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

看似没有问题吧，但是实际上是有问题的，请仔细思考一下， mountElement是不是比setupStatefulComponent 后执行，setupStatefulComponent执行的时候，vnode.el不存在，后续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的第二个参数， 则使用剩余参数即可

到此就圆满成功啦！