To implement a mini vue3 for learn
从 createApp 开始,模板编译、创建组件实例、运行渲染函数、挂载虚拟 dom、接合响应式系统、patch 更新渲染、scheduler 任务调度。
项目结构尽量还原 vue3 源码,只做主线任务。
测试案例均来自 vuejs/core
- 使用 monorepo 架构
- 实现 vue3 的三大核心模块:reactivity、runtime 以及 compiler 模块
- jest: unit test
- cypress: E2E test
git clone git@github.com:mengqiuleo/mini-vue3.git
cd mini-vue3
pnpm i
pnpm test
pnpm build
通过 server 的方式打开 packages/vue/example/* 下的 html 即可
❔ 推荐使用 Live Server
for vue package
pnpm serve //开启本地服务,方便后续 cypress 测试
pnpm test
- reactive 的实现
- ref 的实现
- computed 的实现
- track 依赖收集
- trigger 触发依赖
- 嵌套 effect
- 支持 isReactive
- 支持 effect.scheduler
- 支持组件类型
- 支持 element 类型
- render
- patch
- diff
- h
- scheduler调度器
- nextTick 的实现
- 解析插值
- 解析 element
- 解析 text
- 实现 slot
- 支持 getCurrentInstance
- 支持 provide/inject
- 支持 component emit
- 初始化 props
- setup 可获取 props 和 context
- feat 增加新功能
- fix 修复问题/BUG
- style 代码风格相关无影响运行结果的
- perf 优化/性能提升
- refactor 重构
- revert 撤销修改
- test 测试相关
- docs 文档/注释
- chore 依赖更新/脚手架配置修改等
- workflow 工作流改进
- ci 持续集成
- types 类型定义文件更改
- wip 开发中
- Fork 本仓库
- 新建 Feat_xxx 分支
- 提交代码
- 新建 Pull Request
感谢 cuixiaorui 大佬的 mini-vue
Copyright (c) 2023-present, mengqiuleo