mini-vue3按照以下四个分支的顺序,借助jest进行单元测试,通过测试驱动开发小步走实现。
实现Vue3响应式原理,并在此基础上实现相关API
effect&reactive依赖收集和触发依赖- 实现
effect返回runner - 实现
effect的stop和onStop - 实现
readonly和shallowReadonly - 实现
isReactive、isReadonly和isProxy - 实现
ref - 实现
isRef、unRef和proxyRefs功能 - 实现
computed计算属性
浏览器首次渲染功能,主要实现了一个基本的Vue3的虚拟DOM的节点渲染。
本分支只包含了vnode的首次渲染过程,组件及节点的更新,更新优化,diff算法的实现将会放在下一分支。
- 初始化
component主流程 - 初始化
element主流程 rollup打包库- 实现组件代理对象
- 实现
shapeFlags - 实现事件注册
- 实现组件的
props、emit和slots功能 - 实现
Fragment和Text类型 - 实现
getCurrentInstance - 实现
provide/inject功能
实现Vue3的虚拟DOM更新,包含组件、节点的更新、更新优化、diff算法。
- 实现自定义渲染器
- 更新
element类型节点 - 更新
component类型节点 - diff算法
- 实现
nextTick
实现一个简单的模板编译解析器,可以从<template>编译成render函数以实现最终渲染。
- 解析插值
- 解析
element标签 - 解析
text文本 - 实现
transform功能 - 实现
ast转化为render函数
上述内容是本项目实现流程。
具体实现细节详见每个分支的README.md。
.png)