[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-70719":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":16,"starSnapshotCount":16,"syncStatus":29,"lastSyncTime":30,"discoverSource":31},70719,"mini-vue","cuixiaorui\u002Fmini-vue","cuixiaorui","实现最简 vue3 模型( Help you learn more efficiently vue3 source code )","",null,"TypeScript",10569,2249,98,16,0,3,4,45,"MIT License",false,"master",true,[5,25],"vue3-source","2026-06-12 02:02:42","[CN](README.md) \u002F [EN](README_EN.md)\n\n## mini-vue  [![github](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F%E5%82%AC%E5%AD%A6%E7%A4%BE-mini--vue-blue)](https:\u002F\u002Fgithub.com\u002Fcuixiaorui\u002Fmini-vue)\n\n实现最简 vue3 模型，用于深入学习 vue3， 让你更轻松的理解 vue3 的核心逻辑\n\n## Usage\n\n[B 站](https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1Zy4y1J73E) 提供了视频讲解使用方式\n\n## Why\n\n当我们需要深入学习 vue3 时，我们就需要看源码来学习，但是像这种工业级别的库，源码中有很多逻辑是用于处理边缘情况或者是兼容处理逻辑，是不利于我们学习的。\n\n我们应该关注于核心逻辑，而这个库的目的就是把 vue3 源码中最核心的逻辑剥离出来，只留下核心逻辑，以供大家学习。\n\n## How\n\n基于 vue3 的功能点，一点一点的拆分出来。\n\n代码命名会保持和源码中的一致，方便大家通过命名去源码中查找逻辑。\n\n### Tasking\n\n#### runtime-core\n\n- [x] 支持组件类型\n- [x] 支持 element 类型\n- [x] 初始化 props\n- [x] setup 可获取 props 和 context\n- [x] 支持 component emit\n- [x] 支持 proxy\n- [x] 可以在 render 函数中获取 setup 返回的对象\n- [x] nextTick 的实现\n- [x] 支持 getCurrentInstance\n- [x] 支持 provide\u002Finject\n- [x] 支持最基础的 slots\n- [x] 支持 Text 类型节点\n- [x] 支持 $el api\n- [x] 支持 watchEffect\n\n\n#### reactivity\n\n目标是用自己的 reactivity 支持现有的 demo 运行\n\n- [x] reactive 的实现\n- [x] ref 的实现\n- [x] readonly 的实现\n- [x] computed 的实现\n- [x] track 依赖收集\n- [x] trigger 触发依赖\n- [x] 支持 isReactive\n- [x] 支持嵌套 reactive\n- [x] 支持 toRaw\n- [x] 支持 effect.scheduler\n- [x] 支持 effect.stop\n- [x] 支持 isReadonly\n- [x] 支持 isProxy\n- [x] 支持 shallowReadonly\n- [x] 支持 proxyRefs\n\n### compiler-core\n- [x] 解析插值\n- [x] 解析 element\n- [x] 解析 text\n\n### runtime-dom\n- [x] 支持 custom renderer \n\n### runtime-test\n- [x] 支持测试 runtime-core 的逻辑\n\n### infrastructure\n- [x] support monorepo with pnpm\n### build\n\n```shell\npnpm build\n```\n\n### example\n\n通过 server 的方式打开 packages\u002Fvue\u002Fexample\u002F\\* 下的 index.html 即可\n\n> \b 推荐使用 [Live Server](https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=ritwickdey.LiveServer)\n\n### 初始化\n\n#### 流程图\n![初始化流程图](https:\u002F\u002Fuser-images.githubusercontent.com\u002F12064746\u002F138114565-3e0eecbb-7fd0-4203-bf36-5e5fd8003ce0.png)\n\n> 可加 vx：cuixr1314  获取所有脑图(备注：github mini-vue 领取脑图)\n#### 关键函数调用图\n\n\n![关键函数调用图2](https:\u002F\u002Fimages-1252602850.cos.ap-beijing.myqcloud.com\u002F20220927170658.png)\n\n> 可以基于函数名快速搜索到源码内容\n\n### update\n\n#### 流程图\n\n![image](https:\u002F\u002Fuser-images.githubusercontent.com\u002F12064746\u002F138115157-1f4fb8a2-7e60-412d-96de-12e68eb0288c.png)\n\n#### 关键函数调用图\n\n![image](https:\u002F\u002Fuser-images.githubusercontent.com\u002F12064746\u002F138114969-9139e4af-b2df-41b2-a5d9-069d8b41903c.png)\n\n\n> 可以基于函数名快速搜索到源码内容\n\n\n\n### 从零到一实现一遍\n\n自从有了 mini-vue 之后 很多同学都问我 能不能带着他从零到一敲一遍\n\n因为对于源码的学习来讲 看在多遍也不如自己写一遍\n\n为此我把 mini-vue 做成了一套视频课  从零到一带着大家实现一遍 不跳过任何一行代码\n\n当然除了功能上的实现还有编程思想融入到了课程内 \n\n比如 TDD、小步走、重构手法、TPP \n\n> TDD 测试驱动开发 影响了我整个技术生涯 可以说在我认识到 TDD 之后 技术才有了质的飞跃 \n\n课程目录如下:\n\n1. vue3 源码结构的介绍\n2. reactivity 的核心流程\n3. runtime-core 初始化的核心流程\n4. runtime-core 更新的核心流程\n5. setup 环境 -> 集成 jest 做单元测试 & 集成 typescript\n6. 实现 effect 返回 runner\n7. 实现 effect 的 scheduler 功能\n8. 实现 effect 的 stop 功能\n9. 实现 readonly 功能\n10. 实现 isReactive 和 isReadonly \n11. 优化 stop 功能\n12. 实现 reactive 和 readonly 嵌套对象转换功能\n13. 实现 shallowReadonly 功能\n14. 实现 isProxy 功能\n15. 实现 isProxy 功能\n16. 实现 ref 功能\n17. 实现 isRef 和 unRef 功能\n18. 实现 proxyR 功能\n19. 实现 computed 计算属性功能\n20. 实现初始化 component 主流程\n21. 实现 rollup 打包\n22. 实现初始化 element 主流程\n23. 实现组件代理对象\n24. 实现 shapeFlags\n25. 实现注册事件功能\n26. 实现组件 props 功能\n27. 实现组件 emit 功能\n28. 实现组件 slots 功能\n29. 实现 Fragment 和 Text 类型节点\n30. 实现 getCurrentInstance \n31. 实现依赖注入功能 provide\u002Finject\n32. 实现自定义渲染器 custom renderer\n33. 更新 element 流程搭建\n34. 更新 element 的props\n35. 更新 element 的 children\n36. 双端对比 diff 算法1\n37. 双端对比 diff 算法2 - key 的作用\n38. 双端对比 diff 算法3 - 最长子序列的作用\n39. 学习尤大解决 bug 的处理方式\n40. 实现组件更新功能\n41. 实现 nextTick 功能\n42. 编译模块概述\n43. 实现解析插值功能\n44. 实现解析 element 标签\n45. 实现解析 text 功能\n46. 实现解析三种联合类型 template\n47. parse 的实现原理&有限状态机\n48. 实现 transform 功能\n49. 实现代码生成 string 类型\n50. 实现代码生成插值类型\n51. 实现代码生成三种联合类型\n52. 实现编译 template 成 render 函数\n53. 实现 monorepo & 使用 vitest 替换 jest \n\n课程内部包含了 vue3 的三大核心模块：reactivity、runtime 以及 compiler 模块\n\n等你自己手写一遍之后 在去看 vue3 源码或者再去看分析解析 vue3 源码的书籍时你会有不同的体验\n\n除此之外 还录制了课程介绍以及课程试听课\n- [课程介绍](https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV16Z4y1r7Wp)\n- [试听课](https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1R341177P7)\n- [购买链接](https:\u002F\u002Fcua.h5.xeknow.com\u002Fs\u002FxDWLc)\n\n> 可以直接购买 也可以加我 wx: cuixr1314 来咨询这门课是否合适你\n\n除了课程内容以外 还有专门的社群来答疑大家在学习上的问题 😊   \n","mini-vue 是一个实现最简 vue3 模型的项目，旨在帮助开发者更高效地理解和学习 vue3 的核心逻辑。该项目使用 TypeScript 编写，通过剥离非核心逻辑，保留了 vue3 中如响应式系统（reactivity）、组件渲染（runtime-core）及编译器核心功能（compiler-core）等关键部分。它非常适合那些希望深入了解 vue3 内部工作原理的学习者和开发者，特别是对前端框架底层机制感兴趣的用户。此外，该项目还提供了详细的文档、流程图以及配套的视频教程，进一步降低了学习门槛，有助于用户快速掌握 vue3 的核心概念与实现细节。",2,"2026-06-11 03:33:50","high_star"]