vue3源码分析
文章平均质量分 91
用于分析vue3源码,加深对vue3的理解,里面干货慢慢哦
twinkle||cll
More interest,less interests (多一些兴趣爱好的向往,少一些功名利禄的追求)
展开
-
vue3源码分析——ast生成代码 - 掘金
本期主要实现了如何将ast生成代码,在生成代码的过程,需要使用transform来转换代码,里面可以使用插件系统来对某个节点的个性化操作。在codegen模块中,创建上下文,来逐步增加对于的字符串。httpshttpshttps。...原创 2022-07-14 19:53:56 · 1173 阅读 · 0 评论 -
vue3源码分析——看看complier是怎么来解析的
vue3源码分析——手写diff算法vue3源码分析——实现组件更新vue3源码分析——解密nextTick的实现想知道是怎么实现的吗?🤔🤔🤔,本期就来实现的基础,看看·是如果来处理模板的,所有的源码请查看仓库在astexplorer.net/ 这个网站上可以写上vue的模板,然后选择vue3-complier,就可以得到vue3编译模板后的ast了。 最终效果如下:但是对于一开始肯定是没有那么多属性的,所以可以小步走。先来实现个最简单的形式。分步走在中这可以可以分成三种类型的节...原创 2022-07-07 12:08:30 · 581 阅读 · 0 评论 -
vue3源码分析——解密nextTick的实现
本期主要实现了`nextTick()`,通过`nextTick`看到了`vue`更新`dom`的方式是异步的。并且在这种方式的基础之上,需要使用到**js的事件循环**,在事件循环中**微任务比宏任务的优先级更高**。所以**nextTick使用的是微任务方式来更新dom** 。 看似不到20行的代码,里面却包含着这么多知识点,只能说大佬就是大佬,灵活运用👍👍👍...原创 2022-07-04 17:30:52 · 620 阅读 · 0 评论 -
vue3源码分析——实现组件更新
前面的两期主要是实现,的更新除了的更新外,还有的更新哦,本期就带大家一起来看看,本期所有的源码请查看vue3在更新element的时候,除了需要分情况讨论更新children外,还需要来看vue3的属性有没有变化;那么同样的道理,对于组件的更新,也是需要来更新属性,插槽等根据上面的流程图,可以写出这样的测试用例分析根据上面的流程图,可以分析出下面的需求问题解决:方法的调用肯定是在中的存在的时候来调用,里面需要进行新老节点的对比,判断是否需要进行更新.更新则调用去更新vnode的props...原创 2022-07-01 17:04:18 · 825 阅读 · 0 评论 -
vue3源码分析——手写diff算法
本期来实现,上一期中还差了children与children的对比😉😉😉 vue3更新流程中的children与children的对比,也就是diff算法,所有的源码请查看既然采用的是双端对比,那么肯定是需要3个指针的,请看下图: 总共有3个指针既然有了指针,那是否需要锁定范围呢!指针做对应的移动。移动的方式如下:根据上面的需求,我相信都能得出一个条件并且写出以下代码分情况讨论总共有7中情况,分别是:会发现,i不动, e1和 e2两个指针往左边移动 最终 ,所以可以得出一个条件是...原创 2022-06-30 20:53:02 · 791 阅读 · 0 评论 -
vue3源码分析——实现element属性更新,child更新
本期来实现, vue3更新流程,更新元素的props,以及更新元素的child,所有的源码请查看在上面流程图中,如果在中有一个对象,并且赋值为 ,然后通过某种方式重新赋值为2,就会触发更新流程;effect收集依赖肯定是在里面,但是具体在哪里呢?在中,里面有三个函数看到上面三个函数,想必大家都知道是在哪个函数进行effect了吧!😊😊😊属性更新属性更新,毫无疑问的是,元素中的属性进行更新,新增,修改和删除等!分析通过上面的需求,分析以下内容:问题解决:更新children...原创 2022-06-28 23:15:00 · 784 阅读 · 0 评论 -
vue3源码分析——实现createRenderer,增加runtime-test
本期主要实现了`createRenderer函数`,`改造createApp`等函数,通过这些函数,可以看到vu3在设计方面的用心良苦,尽量让vue3满足更多的人。增加了`runtime-test`,方便用于测试dom环境下面的情况!原创 2022-06-23 22:45:00 · 929 阅读 · 0 评论 -
vue3源码分析——实现组件通信provide,inject
本期来实现, vue3组件通信的provide,inject,所有的源码请查看getCurrentInstance 是获取当前组件的实列,并且只能在setup函数中使用分析在上面的测试拥立中,可以得到以下内容:问题解决:对于上面两个问题,只需要导出一个函数,并且在全局定义一个变量,在setup执行的时候,赋值全局变量即可拿到当前组件的实例,然后setup执行之后,清空即可getCurrentInstance 有没有想到实现方式这么简单哇!😀😀😀父子组件传值可以使用来实现,还记得是...原创 2022-06-21 21:24:06 · 492 阅读 · 0 评论 -
vue3源码分析——实现slots
本期来实现, slot——插槽,分为普通插槽,具名插槽,作用域插槽,所有的源码请查看在 模板中使用插槽的方式如下:在中的内容最终会被成render函数,render函数里面会调用h函数转化成vnode,在vnode的使用方法如下:看完slots的基本用法,一起来实现个slots,方便自己理解slots的原理哦!😀😀😀使用slots的地方是this.slots,并且调用的属性是default,那么slots,并且调用的属性是default,那么slots则是一个对象,对象里面有插槽的...原创 2022-06-20 20:00:00 · 2692 阅读 · 0 评论 -
vue3源码分析——实现props,emit,事件处理等
本期来实现,setup里面使用props,父子组件通信props和emit等,所有的源码请查看在render函数中,可以通过this,来访问setup返回的内容,还可以访问this.$el等由于是测试dom,jest需要提前注入下面的内容,让document里面有app节点,下面测试用例类似在html中定义一个app节点哦本功能的测试用例正式开始分析上面的测试用例解决这两个需求:针对上面的分析,需要在setupStatefulComponent中来创建proxy并且绑定到instanc...原创 2022-06-17 17:13:07 · 1462 阅读 · 0 评论 -
vue3源码分析——实现组件的挂载流程
接下来一起学习下,runtime-core里面的方法,本期主要实现的内容是,通过createApp方法,到mount最后把咋们的dom给挂载成功!,所有的源码请查看咋们需要使这个测试用例跑成功!,在图中可以发现,调用app传入了一个render函数,然后挂载,对比期望结果!思考再三,先把这一节先说了,jest是怎么来测试dom的?默认的环境是,在中可以看到npm有在node中实现了浏览器环境的api的库,jsdom、happy-dom 等,咋们这里就使用比较轻的happy-dom,但是hap...原创 2022-06-14 23:15:00 · 1182 阅读 · 0 评论 -
vue3源码分析——rollup打包monorepo
本期咋们就先放一放源码,咋们如何打包monorepo应用,主要是源码看累了🤣🤣🤣,打包工具也是一门必须课,所有的源码请查看为了提供大家的学习兴趣,咋们先来看看效果,准备发车,请系好安全带🚗🚗🚗使用的是来打包的,咋们也用来打包咋们的应用,有不了解的请查看官网,monorepo是多个单体仓库合并得到的,那么咋们就先来打包单个仓库,然后再来想办法怎么一键打包全部在我项目中,shared仓库是相当与函数的集合,用于对外导出一些工具函数,那么咋们可以在本目录下的中安装。 正当我就想在sha...原创 2022-06-12 20:17:02 · 2359 阅读 · 0 评论 -
手写vue3源码——ref, computed 等
手写vue3源码——创建项目手写vue3源码——reactive, effect ,scheduler, stop手写vue3源码——readonly, isReactive,isReadonly, shallowReadonly本期主要实现的api有,ref, isRef, unRef, proxyRefs, computed,本次所有的源码请查看在代码中,这个api也是用的很频繁的,所以今天咋们就一起来实现下既然都需要使用 .value,是不是意味着,传入的数据都会被一个对象所包裹,基于...原创 2022-06-09 21:30:45 · 575 阅读 · 1 评论 -
手写vue3源码——readonly, isReactive,isReadonly, shallowReadonly
手写vue3源码——readonly, isReactive,isReadonly, shallowReadonl原创 2022-06-08 10:25:10 · 442 阅读 · 0 评论 -
手写vue3源码——reactive, effect ,scheduler, stop 等
, 大家都清除 ,但是对于, 等方法是需要看源码咋们才能明白的😃😃😃,在上一节中,咋们用 pnpm 搭建了一个和vue3一样的monorepo,这一节中,就使用这个方式在里面填充的源码吧!本节的源码请查看本次目标主要是实现,reactive,effect stop, onstop, scheduler 等为了方便大家的理解,这一次咋们就从 测试用例的角度,来写出源码,vue3的响应式相信大家都用过,那么用测试用例来描述则是这样的。reactive看到 想必都不陌生,传入一个对象,返回一个代理对...原创 2022-06-07 11:23:51 · 521 阅读 · 2 评论 -
手写vue3源码——创建项目
在前面的文章中,分析了vue3的响应式数据原理、vue组件初始化流程、vue组件更新流程等文章,有人说学习源码的最好方式,就是把别人的思路理解到来,自己手动敲一遍。那咋们就来手动敲一敲,并且把整个过程记录下来,给有需要的有缘人😃😃😃vue3源码采用的是pnpm + monorepo的方式来创建仓库的。那咋也学习下,用pnpm + monorepo的方式来创建一个自己的源码库使用 来初始化项目然后改动下的内容如下:增加 来使项目是一个monorope的项目,并且里面增加内容如下:packages原创 2022-06-02 16:27:40 · 860 阅读 · 0 评论 -
vue3组件更新流程
先写一个组件,, 然后咋们来执行更新的流程mountupdate还记得组件挂载阶段中的 么? 在这里的时候会进行依赖收集,会在实例instance上挂载一个方法当数据发送变化的时候,就会触发 函数, 不清楚响应式系统的可以查看这里整体的流程图如下:咋们来分析下 vue3 中属性变化的情况对于这种情况,咋们怎么才能找出属性的变化,是不是就是应该遍历 如果里面的 在 中不存在,则标记为新增的属性 代码应该这么写:第二种情况 属性减少对于这种情况,咋们要找出属性的变化,直接遍历 oldPro原创 2022-06-01 17:31:33 · 949 阅读 · 0 评论 -
vue3 组件初始化流程(vue3 源码系列)
学习完成响应式系统后,咋们来看看vue3组件的初始化流程既然是看vue组件的初始化流程,咋们先来创建基本的代码,跑跑流程(在app.vue中写入以下内容,来跑流程)import { h, ref } from "vue";export default { name: 'App', setup() { const count = ref(0); return { count }; }, render() { return h('div.原创 2022-05-30 23:00:00 · 3189 阅读 · 2 评论 -
vue3 响应式数据库—— reactive
请仔细阅读下面代码,思考vue3是如何做响应式数据的?let temp// reactive 是使对象变成一个代理 const counter = reactive({ num: 0 }); // effect主要职责是开启依赖收集,等待get的调用完成正常的依赖存储 effect(() => (temp = counter.num)); // 触发更新 counter.num = 1;在这里是不是有的人要说,咋们在日常开发中,直接在 vue 模板上里面写一个ref 自动帮我.原创 2022-05-27 09:12:42 · 984 阅读 · 0 评论