vue3源码
文章平均质量分 54
基于对vue3源码学习的原理记录
LJPchosen1
菜鸟上路
展开
-
第十二章 实现shallowReadonly功能
2 shallowReadonly中传入createReactiveObject中的shallowReadonlyHandler从我们之前baseHandlers文件中导入。4 然后就是导出shallowReadonlyHandlers,通过封装的extend方法对readonlyHandlers进行扩展修改。1 在reactive.ts中导出shallowReadonly这个方法。shallowReadonly: 让一个响应式数据变为只读的(浅只读)下面我将按顺序给出步骤图片,并且注上解释。原创 2023-03-03 09:43:56 · 289 阅读 · 0 评论 -
第十二章 实现shallowReadonly功能
2 shallowReadonly中传入createReactiveObject中的shallowReadonlyHandler从我们之前baseHandlers文件中导入。4 然后就是导出shallowReadonlyHandlers,通过封装的extend方法对readonlyHandlers进行扩展修改。1 在reactive.ts中导出shallowReadonly这个方法。shallowReadonly: 让一个响应式数据变为只读的(浅只读)下面我将按顺序给出步骤图片,并且注上解释。原创 2023-03-03 09:43:11 · 314 阅读 · 0 评论 -
第十一章 实现reactive和readonly嵌套对象转换的功能
其实分析一下问题,要让reactive中的对象也是reactive那主要就是在触发get的时候对获取到的res是不是对象进行不同操作,如果为对象就要让他传入reactive中响应式化。主要实现是readonly包装过的对象里面的其他对象也是readonly的,有了reactive的基础,其实实现起来就很简单了。直接在get中的对象判断中判断,isReadonly的话就调用readonly函数否则调用reactive函数,如图。就修改了一句代码就可以了,这就是封装优化的好处,增加功能就很简单。原创 2023-03-02 20:09:59 · 140 阅读 · 0 评论 -
第十章 优化stop功能
3 run方法中我们可以通过this.active判断当前是否调用过active,因此当active为true时候,我们才给shouldTrack赋上true,让他可以走入收集依赖的流程,重要的是我们走完fn执行的流程之后,就要把shouldTrack职位false。既然是依赖收集的问题,那么我们是在track中收集的依赖,所以我们应该从track收集依赖入手。stop后已经把依赖清除了,obj.prop又走了get,触发了依赖收集,又收集进去了,就相当于stop函数中的依赖清楚白清除了。原创 2023-03-02 20:07:57 · 151 阅读 · 0 评论 -
第九章 实现isReactive和isReadonly
2 利用isReactive传入的对象,调用对象中特定设置的一个属性__v_isReactive,如果这个对象是响应式对象,就会走get函数。3 我们可以在get函数中判断key值,如果为__v_isReactive的话,就返回他不是readonly。对于这种__v_isReactive属性,我们可以使用枚举,让我们在别的地方降低书写错误。有了isReactive的实现,那isReadonly也就水到渠成了,测试案例。1 reactive.ts中导出isReactive方法。reactive.ts代码。原创 2023-03-02 20:08:58 · 366 阅读 · 0 评论 -
第八章 实现readonly功能
但是其实这样看来我们reactive中的代码还是挺多的,这时候我们还是可以再抽离的,我们可以把proxy中的handler函数抽离到baseHandlers文件中去,抽离完之后就很简洁了,就只剩下几行代码了,get set的逻辑都抽到baseHandlers中去了。既然get都抽离完了,那就到set了,基本上想法和get一样的,甚至比get简单,因为readonly中没有set功能,所以函数中甚至都不需要判断。是不是觉得这些get和set的代码非常的相似,做的非常像,没错,这就是我们今天要重构的地方。原创 2023-03-02 20:06:53 · 143 阅读 · 0 评论 -
第七章 实现effect的stop功能
其实最主要可以重构的点就是effect的第二个配置项参数,因为每次多传入一个配置项时就需要我们手动的去接收一下,其实是很麻烦的。最后,因为我们一直测试的是effect的测试文件(yarn test effect),这个文件的测试用例是通过的了,这时候我们这个模块的功能写完了之后,一般需要yarn test测试一下你所有功能,会不会有问题。根据tdd的开发流程来说,第一步是写测试,第二步是让测试通过,第三步是对代码的一个重构,下面我们就对我们的代码进行重构,让它更有可读性。原创 2023-03-02 20:07:50 · 222 阅读 · 0 评论 -
第六章 effect.scheduler功能实现
3 当 响应式对象 set update 不执行fn 而是执行 scheduler。1 通过 effect 的第二个参数给定一个 scheduler 的 fn。当 响应式对象 set update 执行 scheduler。4 如果说当执行 runner 的时候 会再次执行 fn。2 effect 第一次执行的时候 还会执行 fn。原创 2023-03-02 20:07:01 · 280 阅读 · 0 评论 -
第五章 effect返回的实现
1 调用effect返回一个runner函数,其实主要就讲_effect.run返回出去就行了,但是由于run函数中使用到了this,所以我们需要为返回的run函数bind他的this指向。2 runner函数调用后返回fn中的return的值,fn是在effect对象中的run方法中执行的,所以只需要将effect中的run方法中调用的fn函数返回的值返回就ok了。主要增加了 return _effect.run.bind(_effect)2 runner函数调用后返回fn中的return的值。原创 2023-03-02 20:04:58 · 92 阅读 · 0 评论 -
第四章 reactive对象的简单实现以及reactive的依赖收集和触发依赖
依赖收集主要在Proxy中的get函数中通过track实现,而我们选择在effect.ts中导出track函数,我个人觉得effect中也比较好处理,对于effect实例这些变量的获取上都是比较方便的。依赖收集做好了,起触发依赖就很简单了,就跟着上面的存储关系图,用targetMap找到dep容器,然后循环调用里面effect中run方法就可以了。这段代码就可以看出activeEffect是effect.ts中声明的一个全局变量,然后当运行run函数的时候给他赋值为当前的激活的effect。原创 2023-03-02 20:05:58 · 238 阅读 · 0 评论 -
第三章 集成jest做单元测试环境
2 创建src,reactivity,tests文件夹,还有index.ts,index.spec.ts文件,如图结构所示(src下reactivity下tests)1 通过yarn init -y生成package.json文件夹,并且在script中添加运行程序的命令代码,如图。最后可以先安装一下jest这个插件,如下图所示的红框,方便后期debug,安装成功会有Run|Debug的按钮。5 最后index.spec.ts的测试代码 index.ts代码。首先附上项目目录的截图。原创 2023-03-02 20:03:55 · 345 阅读 · 0 评论 -
第二章 runtime-core初始化核心流程和runtime-core更新核心流程
runtime-core初始化核心流程和runtime-core更新核心流程原创 2023-02-22 14:46:32 · 239 阅读 · 0 评论 -
vue3初体验
修改响应式对象的值-触发set操作-执行trigger-重新运行effect函数-执行fn-触发get操作-执行track-把effect收集起来作为依赖 (重新运行effect函数有基本上走了初始化收集依赖的流程)runtime-dom如图是依赖于后面的runtime-core和reactivity的,很多vue中的api都是由runtime-core中export出来的。创建effect对象-执行fn函数-触发get操作-执行track-把effect收集起来作为依赖。3 最后就是 更新update。原创 2023-02-22 14:45:43 · 200 阅读 · 0 评论