mini-vue README

The project's README from github.com/cuixiaorui/mini-vue. As one markdown file: README.md.

CN / EN

mini-vue github

实现最简 vue3 模型,用于深入学习 vue3, 让你更轻松的理解 vue3 的核心逻辑

Usage

B 站 提供了视频讲解使用方式

Why

当我们需要深入学习 vue3 时,我们就需要看源码来学习,但是像这种工业级别的库,源码中有很多逻辑是用于处理边缘情况或者是兼容处理逻辑,是不利于我们学习的。

我们应该关注于核心逻辑,而这个库的目的就是把 vue3 源码中最核心的逻辑剥离出来,只留下核心逻辑,以供大家学习。

How

基于 vue3 的功能点,一点一点的拆分出来。

代码命名会保持和源码中的一致,方便大家通过命名去源码中查找逻辑。

Tasking

runtime-core

reactivity

目标是用自己的 reactivity 支持现有的 demo 运行

compiler-core

runtime-dom

runtime-test

infrastructure

build

pnpm build

example

通过 server 的方式打开 packages/vue/example/* 下的 index.html 即可

 推荐使用 Live Server

初始化

流程图

初始化流程图

可加 vx:cuixr1314 获取所有脑图(备注:github mini-vue 领取脑图)

关键函数调用图

关键函数调用图2

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

update

流程图

image

关键函数调用图

image

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

从零到一实现一遍

自从有了 mini-vue 之后 很多同学都问我 能不能带着他从零到一敲一遍

因为对于源码的学习来讲 看在多遍也不如自己写一遍

为此我把 mini-vue 做成了一套视频课 从零到一带着大家实现一遍 不跳过任何一行代码

当然除了功能上的实现还有编程思想融入到了课程内

比如 TDD、小步走、重构手法、TPP

TDD 测试驱动开发 影响了我整个技术生涯 可以说在我认识到 TDD 之后 技术才有了质的飞跃

课程目录如下:

  1. vue3 源码结构的介绍
  2. reactivity 的核心流程
  3. runtime-core 初始化的核心流程
  4. runtime-core 更新的核心流程
  5. setup 环境 -> 集成 jest 做单元测试 & 集成 typescript
  6. 实现 effect 返回 runner
  7. 实现 effect 的 scheduler 功能
  8. 实现 effect 的 stop 功能
  9. 实现 readonly 功能
  10. 实现 isReactive 和 isReadonly
  11. 优化 stop 功能
  12. 实现 reactive 和 readonly 嵌套对象转换功能
  13. 实现 shallowReadonly 功能
  14. 实现 isProxy 功能
  15. 实现 isProxy 功能
  16. 实现 ref 功能
  17. 实现 isRef 和 unRef 功能
  18. 实现 proxyR 功能
  19. 实现 computed 计算属性功能
  20. 实现初始化 component 主流程
  21. 实现 rollup 打包
  22. 实现初始化 element 主流程
  23. 实现组件代理对象
  24. 实现 shapeFlags
  25. 实现注册事件功能
  26. 实现组件 props 功能
  27. 实现组件 emit 功能
  28. 实现组件 slots 功能
  29. 实现 Fragment 和 Text 类型节点
  30. 实现 getCurrentInstance
  31. 实现依赖注入功能 provide/inject
  32. 实现自定义渲染器 custom renderer
  33. 更新 element 流程搭建
  34. 更新 element 的props
  35. 更新 element 的 children
  36. 双端对比 diff 算法1
  37. 双端对比 diff 算法2 - key 的作用
  38. 双端对比 diff 算法3 - 最长子序列的作用
  39. 学习尤大解决 bug 的处理方式
  40. 实现组件更新功能
  41. 实现 nextTick 功能
  42. 编译模块概述
  43. 实现解析插值功能
  44. 实现解析 element 标签
  45. 实现解析 text 功能
  46. 实现解析三种联合类型 template
  47. parse 的实现原理&有限状态机
  48. 实现 transform 功能
  49. 实现代码生成 string 类型
  50. 实现代码生成插值类型
  51. 实现代码生成三种联合类型
  52. 实现编译 template 成 render 函数
  53. 实现 monorepo & 使用 vitest 替换 jest

课程内部包含了 vue3 的三大核心模块:reactivity、runtime 以及 compiler 模块

等你自己手写一遍之后 在去看 vue3 源码或者再去看分析解析 vue3 源码的书籍时你会有不同的体验

除此之外 还录制了课程介绍以及课程试听课

可以直接购买 也可以加我 wx: cuixr1314 来咨询这门课是否合适你

除了课程内容以外 还有专门的社群来答疑大家在学习上的问题 😊

mini-vue (cuixiaorui/mini-vue)

Searching Database…

10.5K ·GitHub
这是什么?mini-vue 是 Vue 3 核心的极简重新实现,目的是把代码精简到只保留最核心的逻辑,方便你通过阅读源码来研究 Vue 3 究竟是怎么工作的。
这是能用来开发应用的东西,还是纯粹用来学习的?纯粹用于学习。它是一组 TypeScript 包(reactivity、runtime-core、compiler-core、runtime-dom、runtime-test),逐块复刻 Vue 3 的内部实现,并不是一个生产级框架。
克隆之后怎么把它跑起来?先用 pnpm 安装依赖,然后通过本地服务器打开 packages/vue/example/index.html —— README 推荐用 Live Server 扩展来做这件事。
要研究这份代码,我需要装哪些东西?需要 Node.js 和 pnpm,因为整个仓库是按 pnpm monorepo 组织的。代码用 TypeScript 编写,用 Rollup 构建,用 Vitest 测试,所以任何装有 Node 的操作系统都能用。
和真正的 Vue 3 相比,它完成度怎么样?它只覆盖了 README 任务清单里的学习内容——最核心的运行时、响应式和编译器特性——而省略了生产级框架所需的其它一切。把它当作学习伴侣,而不是 Vue 的替代品。
我需要已经会 Vue 3 才能看懂这个吗?需要——它的目标读者是想深入 Vue 3 内部机制的开发者。整个项目的意义就在于帮你为阅读真正的 vue3 源码做准备,所以默认你已经有一些 Vue 和 TypeScript 经验。
实际上实现了哪些 Vue 3 特性?三个核心模块。响应式:reactive、ref、readonly、computed、track/trigger、带 scheduler 和 stop 的 effect。runtime-core:组件、props、emit、slots、provide/inject、nextTick、getCurrentInstance、watchEffect,以及用于更新的双端 diff。compiler-core 可以解析插值、元素和文本,runtime-dom 支持自定义渲染器。
为什么学 mini-vue 而不是直接读 Vue 3 源码?真实库的源码里充满了边界情况和兼容性处理,重要的逻辑被埋在里面。mini-vue 把这些剥离掉只留核心,同时保留原有的命名,这样你就能用同样的函数名去检索真正的 vue3 代码库。
有配套的视频或课程可以跟着学吗?有。作者在 Bilibili 上放了视频讲解,通过微信分享 init/update 流程图和思维导图,还卖一门 53 节的付费课程,用 TDD、小步提交和重构的方式从零重写 mini-vue。
Creator
cuixiaorui
Size
1.5 MB
Stars
10.5K
Updated
CommitJan 30
Age
6y
Commits · 90 Days