vue3 源码阅读分析系列文章(持续更新中...)

Posted 2021-09-17 若叶岂知秋vip

持续更新中！！！！

声明：

1. 以下所有文章，均为原创，是在阅读(抄)源码过程中的点滴记录，文笔有限，只是个人记录，分享出来希望有所用处。
2. 抄写的仓库：https://github.com/gcclll/stb-vue-next.git 该仓库为学习时，从 0 开始，vue-next 的第一个 commit 开始抄下来的源码仓库，目前学习目的已达，所以不再更新了，到停便时通过了所有有关的官方用例。
3. 所有流程图，脑图链接：https://github.com/gcclll/cheng92.com/tree/master/public/img/vue3 且可直接通过 https://www.cheng92.com/img/vue3/ + 文件名直接访问, 图绝大部分是 svg 格式，建议新标签页打开很清楚，因为用的是 drawer.io 画的。
4. vue3 及其生态有关的会持续更新，学无止境，互勉！！！
5. 更多可进入本人博客 https://www.cheng92.com/vue/ ，水平有限(前端白菜一枚，若有幸得访还请轻踩轻喷，感激不尽!!)

vue-next 每次大更新记录、分析

• Vue3 更新日志 01(3.0.5 ~ 3.1.5)
• Vue3 更新日志 02 - 3.2.x

vue-next 单个功能，特性源码分析

• Vue3 功能拆解① PatchFlags
• Vue3 功能拆解② Scheduler 渲染机制
• Vue3 功能拆解③ 组件更新机制
• Vue3 功能拆解④ 组件 props & attrs
• Vue3 功能拆解⑤ directives 指令系统
• Vue3 功能拆解⑥ directives 事件绑定机制
• Vue3 功能拆解⑦ assets url 转换规则
• Vue3 功能拆解⑧ script setup 来龙去脉
• Vue3 功能拆解⑨ Transition 组件机制
• Vue3 功能拆解⑩ SFC style
• Vue3 功能拆解⑪ expose options&api
• Vue3 功能拆解⑫ 组件选项处理 options(如：methods, data, …)
• Vue3 功能拆解⑬ style v-deep, v-slotted
• Vue3 功能拆解⑭ AST Node Types 各种节点类型详解
• Vue3 功能拆解⑮ effect scope

vue-next 源码阅读(含脑图，流程图)

• Vue3 源码头脑风暴之 1 ☞reactivity
• Vue3 源码头脑风暴之 2 ☞compiler-core - ast parser
• Vue3 源码头脑风暴之 3 ☞compiler-core - transform + codegen
• Vue3 源码头脑风暴之 4 ☞compiler-dom
• Vue3 源码头脑风暴之 5 ☞ compiler-sfc
• Vue3 源码头脑风暴之 6 ☞compiler-ssr
• Vue3 源码头脑风暴之 7 ☞ runtime-core(1)
• Vue3 源码头脑风暴之 7 ☞ runtime-core(2) - render
• Vue3 源码头脑风暴之 7 ☞ runtime-core(3) - render component
• Vue3 源码头脑风暴之 8 ☞ runtime-dom
• Vue3 源码头脑风暴之 9 ☞ server-renderer

vue-next 源码阅读(不含脑图系列(已停更))

• Vue3.0源码系列（一）响应式原理 - Reactivity
• Vue3.0 源码系列（二）编译器核心 - Compiler core 1: parse.ts
• Vue3.0 源码系列（二）编译器核心 - Compiler core 2: ast.ts
• Vue3.0 源码系列（二）编译器核心 - Compiler core 3: compile.ts

vue-next 周边源码阅读(含脑图，流程图)

这部分均是在研究 vue-next 源码时候，顺带着做了点浅显的研究

• vuex for vue3 源码分析(附.脑图)
• vue-router-next for vue3 源码分析(附.脑图)
• Vue3 -> Vite 脚手架
• Vue Vuex Persist Store(数据持久化) - 简化版

其它相关文章

• Vue3 自问自答系列❓❓❓
• Vue3.0源码系列 – 知识点及问题汇总