Skip to content

330595524/mini-vue

 
 

Repository files navigation

mini-vue

实现最简 vue3 模型,用于学习

学习思路

先整理出整个 vue3 的 happy path 来,这相当于是一个房子的框架,然后在慢慢的整理实现细节

todo

  • runtime-core
    • 初始化
      • 流程
      • 细节实现
        • hook 的触发实现
        • 标准化 vnode 的实现
        • 初始化 props 逻辑
        • 初始化 slots 逻辑
        • proxy 暴露给用户的代理实现
        • 给元素设置 props
    • 更新
      • 流程
      • nextTick 的实现
      • 细节实现
        • text_children 类型的 patch
        • array_children 类型的 patch
        • props 类型的 patch

build

yarn build

example

直接打开 example/index.html 即可

初始化

流程图

初始化流程图

关键函数调用图

关键函数调用图1

关键函数调用图2

可以基于函数名快速搜索到源码内容

update

流程图

update流程图

关键函数调用图

update关键函数调用图

可以基于函数名快速搜索到源码内容

About

实现最简 vue3 模型

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 72.6%
  • JavaScript 26.4%
  • HTML 1.0%