zjt-mini-vue3

简体中文 | English

介绍

🙋 你好！

此仓库为 Vue3 源码学习记录，以 TDD 为驱动，致力于用最少的代码实现 happy path ，来深入学习理解 Vue3 源码。

手写完成 Vue3 的三大模块，reactivity（响应式）、runtime（运行时）及compiler（编译），实现最简 Vue3 模型！

为什么要读源码？

✨ 加强对编程语言的理解

🔥 提升编程能力

🚀 提高调试能力

⚡️ 提高代码质量

系列文章

下面为同步更新的 系列文章：

欢迎各位大佬点点star⭐、点点赞👍啊！😂

一、reactivity篇

📑 01_Vue3源码的介绍

📑 02_TDD开发环境搭建

📑 03_01_实现effect&reactive&依赖收集&触发依赖

📑 03_02_理解Proxy和Reflect

📑 04_实现effect返回runner

📑 05_实现effect的scheduler功能

📑 06_实现effect的stop和onStop功能

📑 07_实现readonly功能

📑 08_实现isReactive和isReadonly

📑 09_优化stop功能

📑 10_实现reactive和readonly的嵌套对象转换功能

📑 11_实现shallowReadonly和isProxy功能

📑 12_实现ref功能

📑 13_实现isRef和unRef功能

📑 14_实现proxyRefs功能

📑 15_实现computed计算属性

📑 16_实现相对完善的reactive

📑 17_实现相对完善的effect

二、runtime-core篇

📃 01_实现初始化component流程

三、compiler篇

📰 01_编译模块概述

✍️ 待续...

目前已实现功能点

reactivity

• 实现 reactive
• 实现 ref
• 实现 readonly
• 实现 嵌套reactive和readonly
• 实现 computed
• 实现 effect 并支持分支切换、嵌套及++情况下的依赖收集
• 实现 track -> 依赖收集
• 实现 trigger -> 触发依赖
• 实现 effect.scheduler 调度器
• 实现 基于runner、effect.stop 和 onStop的响应式开启关闭控制
• 实现 isReactive和isReadonly
• 实现 isProxy
• 实现 isRef和unRef
• 实现 shallowReadonly
• 实现 proxyRefs

runtime-core

• 支持 component 类型
• 支持 element 类型
• 支持 Text 类型节点
• 初始化 props
• setup 可获取 props 和 context
• 支持 $el、$slots等api
• 支持 component emit
• 支持 单节点、多节点及具名slots
• 可以在 render 函数中获取 setup 返回的对象
• nextTick 的实现
• 支持 proxy
• 支持 getCurrentInstance
• 支持 provide/inject
• 支持 watchEffect

compiler-core

• 解析插值
• 解析 element
• 解析 text

runtime-dom

• 支持 custom renderer

runtime-test

• 支持测试 runtime-core 的逻辑

infrastructure

• support monorepo with pnpm

勘误

如果发现错误，可以在相应的 issues 进行勘误或者 微信：IamZJT_ 联系我。

如果喜欢或者有所启发，欢迎 star，对作者也是一种鼓励。 当然也可以添加我的微信，一起交流成长。

许可证

所有内容均采用 MIT 进行许可。