Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yaolong1/mini-vue3
最完整的！！手写实现Vue3源码结构相同的mini-vue3 (带详细注释---便于完整学习vue源码)喜欢给个start吧！！
https://github.com/yaolong1/mini-vue3
mini-vue mini-vue3 monorepo typescript vue vue3
Last synced: about 2 months ago
JSON representation
最完整的！！手写实现Vue3源码结构相同的mini-vue3 (带详细注释---便于完整学习vue源码)喜欢给个start吧！！
- Host: GitHub
- URL: https://github.com/yaolong1/mini-vue3
- Owner: yaolong1
- License: apache-2.0
- Created: 2022-02-16T05:39:33.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-10-13T09:51:22.000Z (almost 2 years ago)
- Last Synced: 2024-06-07T22:36:50.697Z (4 months ago)
- Topics: mini-vue, mini-vue3, monorepo, typescript, vue, vue3
- Language: TypeScript
- Homepage:
- Size: 321 KB
- Stars: 50
- Watchers: 2
- Forks: 11
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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
.test {
color: red;
font-size: large;
}
<div @Click="change" class="test">{{counter}}方式1</div>
<div @Click="change" class="test">{{counter}} 方式2</div>
const { compile, createApp, ref } = MiniVue3
const render = compile('#name1') //外部直接创建 需要将全局模式
const App = {
setup() {
const counter = ref(1)
return {
counter,
change: () => {
counter.value++
}
}
},
render() {
return render(this) //这里绑定
}
}
createApp(App).mount('#app1')
const App2 = {
template: '#name2',
setup() {
const counter = ref(1)
return {
counter,
change: () => {
counter.value++
}
}
}
}
createApp(App2).mount('#app2')
const App3 = {
template: '<div @click="change"> {{counter}}方式三 </div>',
setup() {
const counter = ref(1)
return {
counter,
change: () => {
counter.value++
}
}
}
}
createApp(App3).mount('#app3')
```
#### 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