关于我手写了一个vue3这档子事

关于我手写了一个vue3这档子事

关于我手写了一个vue3这档子事

出于学习目的，笔者自己写了一个vue3的简易版实现，在此专栏分不同篇章详细讲解源码细节以及我的实现流程

等 17 人订阅共20篇文章创建于2021-11-18

手写简易版vue3

笔者自己写了一个 vue3 的简易版实现，非常简易，没有阅读难度，起名 beggar-vue，意思不是 "乞丐版 vue"，而是 "乞丐看了都可怜的 vue"

3年前
5.0k
56
13

经过前面18篇长文的堆砌，beggar-vue目前就已经完成了，本文对之前实现过的三大核心模块进行一个总结

3年前
318
1
评论

编译模块7: compile 实现

手写vue3-编译模块-compile实现来凑齐整个beggar-vue的最后一块拼图，整合compiler编译模块

3年前
451
1
评论

编译模块7: compile 实现

编译模块6: codegen 实现

手写vue3-编译模块-codegen实现经过transform之后就可以进入代码生成器了，本文实现一个简易简陋的codegen代码生成器

3年前
665
1
评论

编译模块6: codegen 实现

编译模块5: directiveTransforms 实现

手写vue3-编译模块-指令转换插件实现上文实现了节点转换插件，本文象征性的实现两个比较简单的指令转换插件看看他们干了啥

3年前
647
1
评论

编译模块5: directiveTransforms 实现

编译模块4: transform 实现

手写vue3-编译模块-transform实现前文已经成功构建了AST，可为什么不直接生成代码还需要处理呢，还要做什么处理呢，本文实现一个transform带你一探究竟

3年前
430
5
评论

编译模块4: transform 实现

编译模块3: parse 实现

手写vue3-编译模块-parse实现害，前面啰嗦了两篇专门介绍前置知识，现在终于是可以开始正式实现parse了，泪目

3年前
424
2
评论

编译模块3: parse 实现

编译模块2: parse 准备

手写vue3-编译模块-parse准备由于parse要做的事情很多很杂，分多一篇出来专门介绍parse的一些准备工作

3年前
457
2
评论

编译模块2: parse 准备

编译模块1: 一些前置知识

手写vue3-编译模块-前置知识前面完成了响应式模块和运行时模块，可说到vue的特色那就是模板语法了，接下来正式进入编译模块的实现

3年前
1.6k
7
评论

渲染模块7: createApp 实现

手写vue3-渲染模块-createApp实现每天都在用的API，相信都很熟悉，那么他做了什么事情呢，本文实现一个超简易的createApp

3年前
347
2
评论

渲染模块7: createApp 实现

渲染模块6: 调度机制实现

手写vue3-渲染模块-调度机制实现调度机制这个词一听还挺懵的，不过其实在日常开发种处处都是调度，本文实现组件的调度机制

3年前
1.2k
3
评论

渲染模块5: 组件渲染实现

手写vue3-渲染模块-组件渲染实现组件化开发是现在大家都习以为常的，也总说着万物皆组件，那么本文就来实现组件的渲染

3年前
1.3k
3
2

渲染模块4: diff 算法实现

手写vue3-渲染模块-diff实现上文实现了patch，是广义的diff，本文来实现vue3大名鼎鼎的最大上升子序列diff算法

3年前
445
3
评论

渲染模块4: diff 算法实现

渲染模块3: patch 实现

手写vue3-渲染模块-patch实现前文实现了render，而这远远不够，接下来实现patch，也就是广义的diff算法

3年前
461
3
评论

渲染模块3: patch 实现

渲染模块2: render 实现

手写vue3-渲染模块-render实现前文介绍了一些关于VNode的基础知识，本文正式实现render渲染函数

3年前
442
3
评论

渲染模块2: render 实现

渲染模块1: vnode & render 前置知识

手写vue3-渲染模块-vnode&render前置知识总是听说虚拟dom，他到底是什么东西，本文简单讲解一下虚拟dom的一些小知识

3年前
477
2
评论

渲染模块1: vnode & render 前置知识

响应式模块4: computed 实现

手写vue3-响应式模块-computed实现 computed和ref还有reactive到底有什么区别，本文实现一个极简的computed给你答案

3年前
623
2
4

响应式模块4: computed 实现

响应式模块3: ref 实现

手写vue3-响应式模块-ref实现 ref和reactive是有很大区别的，本文实现一个超简易的ref

3年前
667
3
评论

响应式模块2: effect 实现

手写vue3-响应式模块-effect实现 effect 模块作为响应式实现的核心，非常重要，本文将详细介绍effect的实现

3年前
538
7
评论

响应式模块2: effect 实现

响应式模块1: reactive 实现

手写vue3-响应式模块-reactive实现本系列文章将一行代码一行代码的实现一个简易版vue3

3年前
891
11
评论

响应式模块1: reactive 实现