vue源码分析视频教程（vue20源码解析）

本篇文章给大家谈谈vue源码分析视频教程，以及vue20源码解析对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

1、vue3源码分析-实现props,emit，事件处理等
2、Vue.js 源码剖析-响应式原理、虚拟 DOM、模板编译和组件化
3、【手把手教你搓Vue响应式原理】（一）初识Vue响应式
4、ant-design-vue之form源码解读

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.js 源码剖析-响应式原理、虚拟 DOM、模板编译和组件化

npm run build

使用vue-cli创建的项目默认导入的是运行时版本并且是ESM模块化方式

核心：把会改变数组的方法进行修补，当这些方法被调用的时候调用notify方法，遍历数组中的元素，把对象元素进行响应式处理

Watcher分为三类，Computed Watcher，用户Watcher(监听器)，渲染Watcher

模板编译的主要目的是将模板转换为渲染函数

【手把手教你搓Vue响应式原理】（一）初识Vue响应式

在讲这个之前，首先要明白一点，这个所谓的响应式，其实本身就是对 MVVM 的理解。

MVVM 其实就是所谓的 Modal View ViewModal 。

简单理解，就是你的 data 中的数据，和 template 模板中的界面，本身就是两个东西。

但是， Vue 给你做了一层中间的 ViewModal ,让视图上的改变能反映到 data 中， data 中的改变能反映到视图上。

在这个反映过程中，ViewModal就是视图和数据的一个桥梁。

同样是让 a + 1 。

在 Vue 中，这个桥梁是你看不见的，因为 Vue 都帮你完成了视图和数据的变化传递。

而 React 就是侵入式的，因为要显式地声明 setState ，通过它，来设置变量的同时，设置视图的改变。

所以，所谓的侵入式，其实就是对于桥梁的侵入。

所以， Vue 的神奇之处就在于，不需要我们手动地显示调用 setState ，也就是这个桥梁， Vue 已经帮我们桥接上了。

要让 data 改变的同时，视图也发生改变，所以，问题的所在，就是我们需要监听，什么时候，这个变量发生了变量。

然而， ES5 中，就有那么一个特性，可以做到对于数据的劫持（监听）。

它就是 Object.defineProperty 。

Object.defineProperty( obj, prop, descriptor ) 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象，与此同时，它可以对对象的一些额外底层的属性进行设置。例如可以设置 writable ， enumerable , configurable 等属性。

后面的额外属性设置，才是我们使用它的重点。

但是，我们使用的不是上面的几个属性，最主要的还是它的 get set ，可以对属性值的获取和设置操作进行拦截。

get主要是可以对值的获取进行拦截，，它必须要传入一个 return ，并且，该函数的返回值会被用作属性的值。我们可以来看一个例子:

由于设置了 get ，所以，输出 a.name 的时候直接会被拦截，走 get() 中的 return 所以，此时， a.name 的值应该是你已经被拦截了!。

set主要是可以对值的设置进行拦截，该方法会接受一个参数，那就是被赋予的新值。我们可以来看一个例子:

由于设置了 set ，所以，设置值的时候会被拦截，走 set() 中的方法。

所以， Vue 能自动获取data中的改变，反映到视图的原因，就是有对于变量的获取和设置的劫持，当变量发生改变的同时， Vue 能在第一时间知道，并且对视图做出相应的改变操作。

而这把钥匙就是 Object.defineProperty 。

【尚硅谷】Vue源码解析之数据响应式原理

Object.defineProperty() - MDN