[连载中] Vue2.x 源码分析
𝙸𝚜𝙻𝚊𝚗𝚍 6月17日 53 1 1 53 1 1

写在前面

其实有同学可能会有些疑问,为什么Vue3.1都已经出了,还会有人写Vue2源码的分析呢?最简单的原因就是:笔者刚刚学习完Vue2的源码,学习期间也写了一些文章,写这一系列文章最重要的原因就是再次梳理Vue2的思路。(费曼学习法yyds)

写作计划

准备工作

从入口开始

[更新中]数据驱动

(已更新)new Vue时发生了什么?
Vue实例挂载过程
_render和render函数
createElement — 创建Vnode
_update和patch
小节

[更新中]组件化

createComponent — 创建组件Vnode
patch — 创建组件DOM
mergeOptions — 合并配置
生命周期
组件注册
异步组件的实现(工厂函数)
高级异步组件

[更新中]深入响应式原理

响应式对象
依赖收集
派发更新
nextTick
检测变化的注意事项
计算属性
侦听属性
组件更新

[更新中]编译

编译入口
parse
optimize
generate

[更新中]扩展

v-on
v-model
v-slot
keep-alive
v-if
v-for

其他说明

目前本人还在上大三,现在是考试周,更新可能稍慢。不过所有文章已经基本成型,稍加整理后会慢慢发出~

考虑到知识的连贯性,在文章更新的过程中可能对现有的文章结构、顺序、标题等进行微调,以最终发出的文章为准。

感谢

本系列文章参考了HuangYi的Vue Analysis文档。受益匪浅。推荐阅读。

该文档分析的版本为 Vue2.5,本系列文章主要分析 Vue2.6版本,并分析了 v-slot / v-if / v-for 等指令的实现

VueAnalysis 文档

Wolai 笔记

wolai是我学习 Vue 源码时进行的记录,其中也包括一些案例分析。相对而言比较详细。
笔记链接

Notion 笔记

notion是我再次学习整理 Vue 源码时进行的记录。只记录了主要思路,相对而言比较简练。毕竟学习最重要的环节之一是多次认知。
笔记链接

提示

水平所限,很难一次性详细分析完所有代码,本系列文章只相当于做一个引子,具体还是要自己去打debugger,写小案例,通过单步调试的方式去体会设计思路,加深印象

扫码分享到移动端
1 条评论
粟米社区小李LV5 评论于 6月17日 22:55
该评论收获1个赞

期待

参与评论互动
登录即可参与评论互动哦