/share-vue3

Primary LanguageJavaScript

实现 Vue3 核心模块

  • 实现响应式系统
  • TDD 测试驱动开发
  • vitest 测试框架
  • ChatGPT 编写单元测试 😄
  • excalidraw 画图

代码并没有按照源码的方式去进行组织,目的是学习、实现 vue3 响应式系统的核心,用最少的代码去实现最核心的能力,减少我们的学习负担,并且所有的流程都会有配套的图片,图文 + 代码,让我们学习更加轻松、快乐。

每一个功能都会提交一个 commit ,大家可以切换查看,也顺变练习练习 git 的使用。

代码地址: https://github.com/SuYxh/share-vue3

安装

pnpm i 

启动

pnpm dev

测试

pnpm test

启动文档

pnpm docs:dev

响应式系统

已实现

  • reactive
  • effect
  • 响应式系统MVP模型
  • 依赖收集
  • 派发更新
  • 依赖清理
  • 嵌套 effect
  • scheduler
  • computed
  • watch
  • shallowReactive
  • readonly
  • shallowReadonly
  • ref
  • isRef
  • toRef
  • toRefs
  • proxyRefs

系列文章

流程图

响应式数据结构

image-20240118223902472

响应式系统 MVP 模型

image-20240118223949999

依赖清理

image-20240118224016622

嵌套 effect

image-20240118224141690

scheduler

image-20240118224210357

computed

image-20240118224353017

watch

image-20240118224413560

参考

1、《vuejs 设计与实现》霍春阳

公众号

引导扫码关注

一个前端小学生的学习之路,如果你喜欢前端,我们可以一起进行学习、交流、共建。可以添加好友,结伴学习,成长的路上不孤单!