vue源码全方位解析（vue源码全方位解析 黄译）

今天给各位分享vue源码全方位解析的知识，其中也会对vue源码全方位解析 黄译进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、vue2.0源码解析（上）
• 2、vue3源码分析-实现props,emit，事件处理等
• 3、Vue 组件创建的流程源码分析

vue2.0源码解析（上）

vue项目地址：

当前版本号：2.6.11

1、基本目录结构：

1、找到initState()函数，这是初始化响应式的入口。

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

本期来实现， 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的第二个参数， 则使用剩余参数即可

到此就圆满成功啦！

Vue 组件创建的流程源码分析

注册组件第二个参数默认会调用extend,Vue.extend 使用Vue基础构造器 产生子类

Vue.extend() 中data必须是一个函数，继承与Vue,可以new和挂载

Vue.component("",Vue.extend({})) //传入的是对象

这样复用了同一个对象所以改写为,这样new的时候可以拿到全新的对象

因为new Fn的constructor指向的是Parent，所以Sub.prototype需要重写

———————————————— 分割线 ————————————————————

所以在createElement，需要对组件进行处理（要区分组件和普通元素去创建虚拟节点）

判断是不是原始的标签 还是组件的方法

vue源码全方位解析的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue源码全方位解析 黄译、vue源码全方位解析的信息别忘了在本站进行查找喔。