Skip to content

SuYxh/share-vue3

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
yangxinhao
Jan 23, 2024
dd1a20d · Jan 23, 2024

History

47 Commits
Jan 23, 2024
Jan 16, 2024
Jan 22, 2024
Jan 18, 2024
Jan 23, 2024
Jan 18, 2024
Jan 18, 2024
Jan 18, 2024
Jan 16, 2024

Repository files navigation

实现 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 设计与实现》霍春阳

公众号

引导扫码关注

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

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published