# mini-vue3
**Repository Path**: yaolonga/mini-vue3
## Basic Information
- **Project Name**: mini-vue3
- **Description**: 最完整的Ts版手写实现Vue3源码结构相同的mini-vue3 (带详细注释---便于完整学习vue源码)
- **Primary Language**: NodeJS
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 9
- **Forks**: 2
- **Created**: 2022-02-02
- **Last Updated**: 2024-07-12
## Categories & Tags
**Categories**: Uncategorized
**Tags**: 注释, mini-vue, TypeScript, monorepo, 源码学习
## README
# mini-vue3
#### 声明
源码中的注释都是凭自己对 vue 的理解所写的，如有注释错误或者语义不清晰，希望大家提交中文注释的pr。
#### 介绍
迷你版 vue3 (带详细注释),采用和vue3源码相同的monorepo前端项目管理，源码结构、函数名和vue3基本一致
#### 核心功能
- reactivity
- [x] reactive 只支持普通对象和Map、Set对象的响应式代理
- [x] shallowReactive
- [x] readonly
- [x] shallowReadonly
- [x] ref
- [x] shallowRef
- [x] unref
- [x] proxyRefs
- [x] toRef
- [x] toRefs
- [x] effect
- [x] ReactiveEffect
- [x] computed
- runtime-core
- [x] KeepAlive组件
- [x] Teleport组件
- [x] defineAsyncComponent
- [x] defineComponent
- [x] createAppAPI
- [x] onBeforeMount
- [x] onMounted
- [x] onBeforeUpdate
- [x] onUpdated
- [x] onBeforeUnmount
- [x] onUnmounted
- [x] watch
- [x] patch
- [x] emit
- [x] slots
- [x] h
- [x] scheduler调度器
- [x] createVNode
- [x] createRenderer
- runtime-dom
- [x] createApp
- [x] createSSRApp
- [x] Transition 组件
- [x] ensureRenderer
- [x] ensureHydrationRenderer
- [x] render
- [x] hydrate
- compiler-core
- [x] baseParse
- [x] baseCompile
- [x] codegen
- [x] transform
- [x] transformElement
- [x] transformText
- [x] transformExpression
- [x] transformBind
- [x] transformOn
- [ ] transformIf
- [ ] transformFor
- compiler-dom
- [x] parse
- [x] compile
- template-explorer
- [x] 支持编译生成render函数代码预览
- shared
- [x] 基本的通用工具函数和枚举
- vue
- [x] compile 返回一个render函数
- [x] 全局统一导出miniVue3供外部使用，目前只支持global引入和esModule方式引入
- server-renderer
- [x] renderToString
- [x] renderVNode
- compiler-sfc
- [ ] 未完成
#### 使用说明
1. 安装依赖
```
yarn install
```
2. 打包
- 打包全部模块
```
yarn build
```
- 打包单个模块
```
yarn dev 模块名 -f 打包方式
# 打包方式有三种cjs、esm、global
```
3. 使用
将打包好的模块中的 dist 目录下的`xxxx.global.js` 引用到 html 中
```html
编译测试 全局引入Global
```
#### Git 贡献提交规范
- 参考 vue 规范
- feat 增加新功能
- fix 修复问题/BUG
- style 代码风格相关无影响运行结果的
- perf 优化/性能提升
- refactor 重构
- revert 撤销修改
- test 测试相关
- docs 文档/注释
- chore 依赖更新/脚手架配置修改等
- workflow 工作流改进
- ci 持续集成
- types 类型定义文件更改
- wip 开发中
#### 参与贡献
1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request