![](https://img-blog.csdnimg.cn/direct/94076d10dbde454ab189557d8c37de31.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
你还不会手写 vue 吗
文章平均质量分 87
Vue 源码解析以及核心模块实现
Timer@
相逢的人会再相逢!—— A front-end lover !
微信 Y170088888
展开
-
实现vue3响应式系统核心-MVP 模型
- TDD 测试驱动开发- 重构- vitest的使用- 如何使用 [ChatGPT](https://ask.vuejs.news/) 编写单元测试- 响应式数据以及副作用函数- 响应式系统基本实现- Vue3 的响应式的数据结构是什么样?为什么是这样?如何形成的?- Proxy 为什么要配合 Reflect 使用?如果不配合会有什么问题?- Map 与 WeakMap的区别- 依赖收集- 派发更新- 依赖清理- 支持嵌套原创 2024-01-21 19:59:12 · 841 阅读 · 0 评论 -
实现vue3响应式系统核心-合理触发响应
拦截in操作符拦截for in循环拦截对象的删除操作接下来我们在对响应式系统做一些优化,避免一些不必要的响应代码地址: https://github.com/SuYxh/share-vue3代码并没有按照源码的方式去进行组织,目的是学习、实现 vue3 响应式系统的核心,用最少的代码去实现最核心的能力,减少我们的学习负担,并且所有的流程都会有配套的图片,图文 + 代码,让我们学习更加轻松、快乐。每一个功能都会提交一个commit,大家可以切换查看,也顺变练习练习 git 的使用。原创 2024-01-31 10:31:12 · 646 阅读 · 0 评论 -
实现vue3响应式系统核心-shallowReactive
今天来实现一下这个 API。reactive函数是一个深响应,当你取出的值为对象类型,需要再次调用reactive进行响应式处理。很明显我们目前的代码是一个浅响应,即 只代理了对象的第一层,也就是。代码地址: https://github.com/SuYxh/share-vue3代码并没有按照源码的方式去进行组织,目的是学习、实现 vue3 响应式系统的核心,用最少的代码去实现最核心的能力,减少我们的学习负担,并且所有的流程都会有配套的图片,图文 + 代码,让我们学习更加轻松、快乐。原创 2024-01-31 10:32:13 · 770 阅读 · 0 评论 -
实现vue3响应式系统核心-增强对象拦截
在之前的文章中我们实现一个响应式系统的 MVP 模型,也实现了computedwatch等。如何拦截in操作符呢?如何拦截for in循环呢?如何拦截对象的删除操作呢?接下来我们会一步步实现这些功能,进一步增强 MVP 模型。代码地址: https://github.com/SuYxh/share-vue3。原创 2024-01-30 09:56:37 · 1118 阅读 · 1 评论 -
实现vue3响应式系统核心-watch
今天我们来看看watch的实现。watch本质就是观测一个响应式数据,当数据发生变化时通知并执行相应的回调函数。实际上,watch的实现本质上就是利用了effect以及选项。代码地址: https://github.com/SuYxh/share-vue3代码并没有按照源码的方式去进行组织,目的是学习、实现 vue3 响应式系统的核心,用最少的代码去实现最核心的能力,减少我们的学习负担,并且所有的流程都会有配套的图片,图文 + 代码,让我们学习更加轻松、快乐。每一个功能都会提交一个commit。原创 2024-01-30 09:55:38 · 1244 阅读 · 0 评论 -
实现vue3响应式系统核心-computed
在之前的文章中介绍了effect函数,它用来注册副作用函数,同时它也允许指定一些选项参数options,例如指定scheduler调度器来控制副作用函数的执行时机和方式;也介绍了用来追踪和收集依赖的track函数,以及用来触发副作用函数重新执行的trigger函数。综合这些内容,我们就可以实现 Vue.js 中一个非常重要并且非常有特色的能力——计算属性。代码地址: https://github.com/SuYxh/share-vue3。原创 2024-01-29 11:02:46 · 694 阅读 · 0 评论 -
实现vue3响应式系统核心-嵌套effect
嵌套 effecteffect 支持自增运算符代码地址: https://github.com/SuYxh/share-vue3代码并没有按照源码的方式去进行组织,目的是学习、实现 vue3 响应式系统的核心,用最少的代码去实现最核心的能力,减少我们的学习负担,并且所有的流程都会有配套的图片,图文 + 代码,让我们学习更加轻松、快乐。每一个功能都会提交一个commit,大家可以切换查看,也顺变练习练习 git 的使用。原创 2024-01-25 10:00:00 · 757 阅读 · 0 评论 -
实现vue3响应式系统核心-scheduler
可调度性是响应系统非常重要的特性。首先我们需要明确什么是可调度性。所谓可调度,指的是当 `trigger` 动作触发副作用函数重新执行时,有能力决定副作用函数执行的时机、次数以及方式。原创 2024-01-29 10:58:00 · 561 阅读 · 0 评论 -
实现 vue3 响应式系统核心-依赖清理
在[实现vue3响应式系统核心-MVP 模型](./实现vue3响应式系统核心-MVP 模型) 文章中我们介绍了一个最基础的响应式系统。今天的目标是实现依赖清理,依然使用 TDD 的模式进行,再利用 ChatGPT 进行高效学习。原创 2024-01-24 20:10:05 · 908 阅读 · 0 评论