源码中的注释都是凭自己对 vue 的理解所写的，如有注释错误或者语义不清晰，希望大家提交中文注释的pr。
迷你版 vue3 (带详细注释),采用和vue3源码相同的monorepo前端项目管理，源码结构、函数名和vue3基本一致
- reactivity
- reactive 只支持普通对象和Map、Set对象的响应式代理
- shallowReactive
- readonly
- shallowReadonly
- ref
- shallowRef
- unref
- proxyRefs
- toRef
- toRefs
- effect
- ReactiveEffect
- computed
- runtime-core
- KeepAlive组件
- Teleport组件
- defineAsyncComponent
- defineComponent
- createAppAPI
- onBeforeMount
- onMounted
- onBeforeUpdate
- onUpdated
- onBeforeUnmount
- onUnmounted
- watch
- patch
- emit
- slots
- h
- scheduler调度器
- createVNode
- createRenderer
- runtime-dom
- createApp
- createSSRApp
- Transition 组件
- ensureRenderer
- ensureHydrationRenderer
- render
- hydrate
- compiler-core
- baseParse
- baseCompile
- codegen
- transform
- transformElement
- transformText
- transformExpression
- transformBind
- transformOn
- transformIf
- transformFor
- compiler-dom
- parse
- compile
- template-explorer
- 支持编译生成render函数代码预览
- shared
- 基本的通用工具函数和枚举
- vue
- compile 返回一个render函数
- 全局统一导出miniVue3供外部使用，目前只支持global引入和esModule方式引入
- server-renderer
- renderToString
- renderVNode
- compiler-sfc
- 未完成
- 安装依赖
yarn install
- 打包
- 打包全部模块
yarn build - 打包单个模块
yarn dev 模块名 -f 打包方式 # 打包方式有三种cjs、esm、global
- 使用
将打包好的模块中的 dist 目录下的
xxxx.global.js引用到 html 中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>编译测试 全局引入Global</title>
</head>
<style>
.test {
color: red;
font-size: large;
}
</style>
<body>
<div id="app1"></div>
<div id="app2"></div>
<div id="app3"></div>
<script src="../dist/vue.global.js"></script>
<script type="text/x-template" id="name1">
<div @Click="change" class="test">{{counter}}方式1</div>
</script>
<script type="text/x-template" id="name2">
<div @Click="change" class="test">{{counter}} 方式2</div>
</script>
<script>
const { compile, createApp, ref } = MiniVue3
</script>
<!-- 方式1 -->
<script>
const render = compile('#name1') //外部直接创建 需要将全局模式
const App = {
setup() {
const counter = ref(1)
return {
counter,
change: () => {
counter.value++
}
}
},
render() {
return render(this) //这里绑定
}
}
createApp(App).mount('#app1')
</script>
<!-- 方式2 -->
<script>
const App2 = {
template: '#name2',
setup() {
const counter = ref(1)
return {
counter,
change: () => {
counter.value++
}
}
}
}
createApp(App2).mount('#app2')
</script>
<!-- 方式3 -->
<script>
const App3 = {
template: '<div @click="change"> {{counter}}方式三 </div>',
setup() {
const counter = ref(1)
return {
counter,
change: () => {
counter.value++
}
}
}
}
createApp(App3).mount('#app3')
</script>
</body>
</html>- 参考 vue 规范
- feat 增加新功能
- fix 修复问题/BUG
- style 代码风格相关无影响运行结果的
- perf 优化/性能提升
- refactor 重构
- revert 撤销修改
- test 测试相关
- docs 文档/注释
- chore 依赖更新/脚手架配置修改等
- workflow 工作流改进
- ci 持续集成
- types 类型定义文件更改
- wip 开发中
- Fork 本仓库
- 新建 Feat_xxx 分支
- 提交代码
- 新建 Pull Request