# vue3.0

**Repository Path**: fengshengsc_admin/mini-vue3.0

## Basic Information

- **Project Name**: vue3.0
- **Description**: vue3.0源码学习（48课时）一周2课时（时间安排6个月）2022/10/14～2023/03/14
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-07-29
- **Last Updated**: 2023-07-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3.0

### 介绍

vue3.0 源码学习（48 课时）一周 2 课时（时间安排 6 个月）✅

### 学习时间

    2022/10/17～2023/03/17 （20周）9:30～11:00

### 学习方式

     1.看第一遍

     2.第二遍根据看的视频自己实现

     3.自己实现完之后再看第三遍，补全实现

     4.查阅相关资料理解为什么要这样设计

     5.查看vue3源码实现（更改部分代码，按源码方式实现）

### 课时学习计划安排

---

### 响应系统 

    (2022/10/17 ～ 2022/12/12)

#### vue设计与实现（第二篇）

##### 4.响应系统的作用与实现 

- [x] 4.1 响应式数据与副作用函数

- [x] 4.2 响应式的基本实现

- [x] 4.3 设计一个完善的响应式系统

- [x] 4.4 分支切换与 cleanup

- [x] 4.5 嵌套的 effect 与 effect 栈

- [x] 4.6 避免无限递归循环

- [x] 4.7 调度执行

- [x] 4.8 计算属性 computed 与 lazy

- [ ] 4.9 watch 的实现原理

- [ ] 4.10 立即执行的 watch 与回调执行时机

- [ ] 4.11 过期的副作用

##### 5.非原始值的响应式方案

- [x] 5.1 理解 proxy 和 Reflect

- [x] [5.2 javascript 对象及 proxy 的工作原理](https://gitee.com/qiaorunqiang/mini-vue3.0/blob/main/book/Design-and-Implementation/observer/5.2.javascript%E5%AF%B9%E8%B1%A1%E5%8F%8Aporxy%E7%9A%84%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86.md)

- [x] [5.3 如何代理 Object](https://gitee.com/qiaorunqiang/mini-vue3.0/blob/main/book/Design-and-Implementation/observer/5.3.%E5%A6%82%E4%BD%95%E4%BB%A3%E7%90%86object.md)

- [x] [5.4 合理地触发响应](https://gitee.com/qiaorunqiang/mini-vue3.0/blob/main/book/Design-and-Implementation/observer/5.4%E5%90%88%E7%90%86%E5%9C%B0%E8%A7%A6%E5%8F%91%E5%93%8D%E5%BA%94.md)

- [x] [5.5 浅响应与深响应](https://gitee.com/qiaorunqiang/mini-vue3.0/blob/main/book/Design-and-Implementation/observer/5.5%E6%B5%85%E5%93%8D%E5%BA%94%E4%B8%8E%E6%B7%B1%E5%93%8D%E5%BA%94.md)

- [x] [5.6 只读和浅只读](https://gitee.com/qiaorunqiang/mini-vue3.0/blob/main/book/Design-and-Implementation/observer/5.6%E5%8F%AA%E8%AF%BB%E5%92%8C%E6%B5%85%E5%8F%AA%E8%AF%BB.md)

- [x] [5.7 代理数组](https://gitee.com/qiaorunqiang/mini-vue3.0/blob/main/book/Design-and-Implementation/observer/5.7%E4%BB%A3%E7%90%86%E6%95%B0%E7%BB%84.md)

- [ ] 5.8 代理 Set 和 Map


##### 6.原始值的响应式方案

- [x] [6.1 引入 ref 的概念](https://gitee.com/qiaorunqiang/mini-vue3.0/blob/main/book/Design-and-Implementation/observer/6.1%E5%BC%95%E5%85%A5ref%E6%A6%82%E5%BF%B5.md)

- [x] [6.2 响应式丢失问题](https://gitee.com/qiaorunqiang/mini-vue3.0/blob/main/book/Design-and-Implementation/observer/6.2%E5%93%8D%E5%BA%94%E5%BC%8F%E4%B8%A2%E5%A4%B1%E9%97%AE%E9%A2%98.md)

- [x] [6.3 自动脱 ref](https://gitee.com/qiaorunqiang/mini-vue3.0/blob/main/book/Design-and-Implementation/observer/6.3%E8%87%AA%E5%8A%A8%E8%84%B1ref.md)

#### mini-vue (reactive)

- ✅ [实现 effect&reactive&依赖收集&触发依赖](https://www.wolai.com/cuixiaorui/aRc4nqAHFEHCJYQWcL1TgN)

- ✅ [实现 effect 返回 runner](https://www.wolai.com/cuixiaorui/iJpwSLP51QJQYpNFxoMqK7)

- ✅ [实现 effect.scheduler 功能](https://www.wolai.com/cuixiaorui/pHm5WXQpt27uVcKsDLXarc)

- ✅ [实现 effect 的 stop 功能](https://www.wolai.com/cuixiaorui/uBpJGpPxCADoefdnjm71U6)

- ✅ [实现 readonly 功能](https://www.wolai.com/cuixiaorui/6nSFnxZ27qUDeKEumeMJjX)

- ✅ [实现 isReactive 和 isReadonly](https://www.wolai.com/cuixiaorui/r2jXLLLbv9BD4vN7RsjR4t)

- ✅ [优化 stop 功能](https://www.wolai.com/cuixiaorui/fmMhWmeoec5gV7bdDnfq3B)

- ✅ [实现 reactive 和 readonly 嵌套对象功能转换功能](https://www.wolai.com/cuixiaorui/jrVBS2gxaCnMXcEWYS4zri)

- ✅ [实现 shallowReadonly](https://www.wolai.com/cuixiaorui/guEb2A7u2cBEeJoncDoM85)

- ✅ [实现 isProxy 功能](https://www.wolai.com/cuixiaorui/7bq8UqCCXPucNhX1JsGEff)

- ✅[实现 ref 功能](https://www.wolai.com/cuixiaorui/dttsX17sdmWJ3FZUaqVUeV)

- ✅[实现 isRef 和 unRef 功能](https://www.wolai.com/cuixiaorui/3JsfQLYNPRroJz2joDEUCT)

- ✅[实现 proxyRefs 功能](https://www.wolai.com/cuixiaorui/sb17oVvRXvBVTc147sfrms)

- ✅[实现 computed 计算属性](https://www.wolai.com/cuixiaorui/qXpgZ28WnPLpswSgytQGVd)


### 渲染器与组件化

    (2022/12/19 ～ )

#### vue设计与实现（第三，四篇）

##### 7.渲染器的设计

- [x] 7.1 渲染器与响应式系统的结合

- [x] 7.2 渲染器的基本概念

- [x] 7.3 自定义渲染器

##### 8.挂载与更新

- [x] 8.1 挂载子节点和元素的属性

- [x] 8.2 HTML Attributes 与 DOM

- [x] 8.3 正确的设置元素属性

- [x] 8.4 class 的处理

- [x] 8.5 卸载操作

- [x] 8.6 区分 vnode 的类型

- [x] 8.7 事件的处理

- [x] 8.8 事件冒泡与更新时机问题

- [x] 8.9 更新子节点

- [x] 8.10 文本节点和注释节点

- [x] 8.11 Fragment

##### 9.简单 Diff 算法

- [x] 9.1 减少 DOM 操作

- [x] 9.2 DOM 复用与 key 的作用

- [x] 9.3 找到需要移动的元素

- [x] 9.4 如何移动元素

- [x] 9.5 添加新元素

- [x] 9.6 移除不存在的元素

- [x] 9.7 总结

##### 10.双端 Diff 算法

- [x] 10.1 双端比较的原理

- [x] 10.2 双端比较的优势

- [x] 10.3 非理想状况的处理方式

- [x] 10.4 添加新元素

- [x] 10.5 移除不存在的元素

##### 11.快速 Diff 算法

- [x] 11.1 相同的前置元素和后置元素

- [x] 11.2 判断是否需要进行 DOM 移动

- [x] 11.3 如何移动元素

##### 12.组件的实现原理

- [x] 12.1 渲染组件

- [x] 12.2 组件状态与自更新

- [x] 12.3 组件实例与组件声明周期

- [x] 12.4 props 与组件的被动更新

- [x] 12.5 setup 函数的作用与实现

- [x] 12.6 组件事件与 emit 的实现

- [x] 12.7 插槽的工作原理

- [x] 12.8 注册声明周期

##### 13.异步组件与函数式组件

- [ ] 13.1 异步组件要解决的问题

- [ ] 13.2 异步组件的实现原理

- [ ] 13.3 函数式组件

- [ ] 13.4 总结

##### 14.内建组件和模块

- [ ] 14.1 keepAlive 组件的实现原理

- [ ] 14.2 Teleport 组件的实现原理

- [ ] 14.3 Transition 组件的实现原理

- [ ] 14.4 总结

#### mini-vue (runtime-core)

- ✅[实现初始化 component 主流程](https://www.wolai.com/cuixiaorui/gwMSFanKJExqPGef9GRnHx) 

- ✅[实现 rollup 打包库](https://www.wolai.com/cuixiaorui/ZTgHwy4gNUnP1T8ev8PV5)

- ✅[实现初始化 element 主流程](https://www.wolai.com/cuixiaorui/oHbdAYnX1PGTkE762Syu5b)  

- ✅[实现组件代理对象](https://www.wolai.com/cuixiaorui/aEYKuncuPSYboi3juJDmit) 

- ✅[实现 shapeFlags](https://www.wolai.com/cuixiaorui/i9eGGRQTwnEbjatX2MJ61z)

- ✅[实现注册事件功能](https://www.wolai.com/cuixiaorui/vNt3RPcoSnNq5J5gbRMFzT) 

- ✅[实现组件 props 逻辑](https://www.wolai.com/cuixiaorui/q2bDQrVotT4XmXvfBHgsLo)

- ✅[实现组件 emit 功能](https://www.wolai.com/cuixiaorui/5C9nAe8Vvg3eTXNVmLf3C6) 

- ✅[实现组件 slot 功能](https://www.wolai.com/cuixiaorui/4EqgLa7wucKGrQoW4kiykB)

- [实现 Fragment 和 Text 类型节点](https://www.wolai.com/cuixiaorui/rQpih2Gb1gfw93ECnQzvRF) [P: 02-21]

- [实现 getCurrentInstance](https://www.wolai.com/cuixiaorui/5aVXno4MnPrYJeS172YJWE)

- [实现 provide-inject 功能](https://www.wolai.com/cuixiaorui/wi47AmRck7wBduZVbSZFfH) 

- [实现自定义渲染器 custom render](https://www.wolai.com/cuixiaorui/pNB836Crjs6MCMWvPwNrGh) [P: 02-22]

- [更新 element 流程搭建](https://www.wolai.com/cuixiaorui/xwgF2KkpFaDNDs9WaUv7zU) 

- [更新 element 的 props](https://www.wolai.com/cuixiaorui/bgZmbJvcLpkxUEuYWnJbXA) [P: 02-24]

- [更新 element 的 children](https://www.wolai.com/cuixiaorui/nUhjPAGZnw6VkHijUhoszp) 

- [更新 element 的 children - 双端对比 diff 算法(1)](https://www.wolai.com/cuixiaorui/rTkUAEBvoUoyRYmXSqYgJh) [P: 02-27]

- [更细 element 的 children - 双端对比 diff 算法(2)](https://www.wolai.com/cuixiaorui/wvSS2d2mAnEkgEUk1s3phk) 

- [更细 element 的 children - 双端对比 diff 算法(3)](https://www.wolai.com/cuixiaorui/sKQToUaYg1PqqSviX3HH8Y)

- [实现组件更新功能](https://www.wolai.com/cuixiaorui/vufH9HJd8bARgQt4efk9aq) [P: 02-28]

- [实现 nextTick 功能](https://www.wolai.com/cuixiaorui/nAdCJ5pGkvnuYkDMYf1psU)





### 编译器

#### vue设计与实现（第五篇）

##### 15.编译器核心技术概览

- [ ] 15.1 模版的 DSL 的编译器

- [ ] 15.2 parser 的实现原理与状态机

- [ ] 15.3 构造 AST

- [ ] 15.4 AST 的转化与插件化架构

- [ ] 15.5 将模版 AST 转化为 Javascript AST

- [ ] 15.6 代码生成


##### 16.解析器

- [ ] 16.1 文本模式及其对解析器的影响

- [ ] 16.2 递归下降算法构造模版 AST

- [ ] 16.3 状态机的开启与停止

- [ ] 16.4 解析标签属性

- [ ] 16.5 解析属性

- [ ] 16.6 解析文本与解码 HTML 实体

- [ ] 16.7 解析插值与注释

##### 17.编译优化

- [ ] 17.1 动态节点收集与补丁标志

- [ ] 17.2 Block 树

- [ ] 17.3 静态提升

- [ ] 17.4 预字符串化

- [ ] 17.5 缓存内联事件处理函数

- [ ] 17.6 总结


#### mini-vue (compiler-core)

- [编译模块概述](https://www.wolai.com/cuixiaorui/bfiFZ6vw4Qata8YVYgkDVj)

- [实现解析插值功能](https://www.wolai.com/cuixiaorui/j26JU4icjcmsNud8YucuRo)

- [实现解析 element 标签](https://www.wolai.com/cuixiaorui/pmGS9y5FHLSrzPm54CYLAu)

- [实现解析 text 功能](https://www.wolai.com/cuixiaorui/enpjs4iruLcP7zhrExXHfi)

- [实现解析三种联合类型 template](https://www.wolai.com/cuixiaorui/9vFkrjs2MWa9ocaQM6LcEA)

- [parse 的实现原理及有限状态机](https://www.wolai.com/cuixiaorui/tixMXMjFrabriT2EypTbAE)

- [实现 transform 功能](https://www.wolai.com/cuixiaorui/iWTPNf67tfM6RpBrFn1awg)

- [实现代码生成 string 类型](https://www.wolai.com/cuixiaorui/u2PbH192xGKCBHCrAdFk2e)

- [实现代码生成插值类型](https://www.wolai.com/cuixiaorui/73zPZQNyhuAfPBnVkMSaGZ)

- [实现代码生成三种联合类型\_副本](https://www.wolai.com/cuixiaorui/jeXQK2rjy6ra1zZZSzj1ay)

- [实现代码生成三种联合类型](https://www.wolai.com/cuixiaorui/qq6dS7cYU2w6McSBRSVA9Y)

- [实现编译 template 成 render 函数](https://www.wolai.com/cuixiaorui/dmS3GKXVnfaMh5EodPXS38)