这门课解决什么问题

日常做业务时，大家多半是在写组件、调接口、堆页面，很少会去碰 Vue3 的底层实现。但真遇到棘手场景——比如响应式数据没按预期更新、自定义 ref 行为诡异、或者想给团队抽一个深度定制渲染层——光靠背 API 是不够的。这门课的主题就是带你拆解 Vue3 的源码，重点围绕 reactivity（响应式）和 runtime-core（运行时）两块，把依赖收集、触发更新、组件初始化与更新流程一步步实现出来。它解决的不是一个具体业务需求，而是“看不懂源码、读了也记不住、记住了不会用”这个问题。学完之后，你对 Vue3 的心智模型会从“会用”变成“知道它为什么这么设计”，排错和做底层封装时更有底气。

适合什么基础，建议先看哪几块

这门课不适合完全没写过 Vue 的人。默认你得用过 Vue3 的 Composition API，知道 ref、reactive、effect 大概干嘛，同时 TypeScript 至少能看懂泛型和类型推导。如果你只写过 Vue2 的 options API，建议先补一点基础再看，否则到 effect 的 scheduler、stop 这些环节很容易卡住。建议的观看顺序是：先看源码结构介绍，建立整体地图；然后直接进 reactivity 部分，因为它是整门课的主轴，依赖收集和触发依赖讲得最细；runtime-core 的初始化和更新流程放在后面。effect 那几节里的 stop、scheduler、readonly 是难点，别跳，后面做组件更新时逻辑会接回来。

资料怎么配合练习，学完能独立做什么

这批资料的核心价值不是“看视频”，而是跟着把一个迷你版 Vue3 跑起来。正确用法是：先自己写一遍 effect 和 reactive 的最简实现，再对照课程里的单元测试，看自己的输出和预期差在哪。课程里用 Jest 做单元测试这一点很关键，不要跳过测试部分，因为响应式的行为特别适合用断言来验证。每实现一个功能，先跑测试，再往下走。学完之后，你应该能独立做几件事：写一个自定义 reactivity 工具、读懂 Vue3 官方源码里 reactivity 和 runtime-core 的主流程、在排查响应式相关 bug 时能直接定位到是依赖收集还是触发环节出问题。这不是一门背完就能上手的课，得动手敲，敲完才算自己的。


01-Vue3 源码结构的介绍 · 02-reactivity 的核心流程 · 03-runtime-core 初始化的核心流程 · 04-runtime-co

课程目录

*   01-Vue3 源码结构的介绍

*   02-reactivity 的核心流程

*   03-runtime-core 初始化的核心流程

*   04-runtime-core 更新的核心流程

*   05-setup环境-集成jest做单元测试-集成 ts

*   06-实现 effect & reactive & 依赖收集 & 触发依赖

*   07-实现 effect 返回 runner

*   08-实现 effect 的scheduler 功能

*   09-实现 effect 的 stop 功能

*   10-实现 readonly 功能

*   11-实现 isReactive 和 isReadonly

*   12-优化 stop 功能

*   13-实现 reactive 和 readonly 嵌套对象转换功能

*   14-实现 shallowReadonly 功能

*   15-实现 isProxy 功能

*   16-实现 ref 功能

*   17-实现 isRef 和 unRef 功能

*   18-实现 proxyRefs 功能

*   19-实现 computed 计算属性

*   20-实现初始化 component 主流程

*   21-使用 rollup 打包库

*   22-实现初始化 element 主流程

*   23-实现组件代理对象

*   24-实现 shapeFlags

*   25-实现注册事件功能

*   26-实现组件 props 功能

*   27-实现组件 emit 功能

*   28-实现组件 slots 功能

*   29-实现 Fragment 和 Text 类型节点

*   30-实现 getCurrentInstance

*   31-实现provide-inject 功能

*   32-实现自定义渲染器 custom renderer

*   33-更新element流程搭建

*   34-更新element 的 props

*   35-更新 element 的 children

*   36-更新 element 的 children - 双端对比diff 算法 （1）

*   37-更新 element 的 children - 双端对比diff 算法 （2）

*   38-更新 element 的 children - 双端对比diff 算法 （3）

*   39-学习尤大解决bug的处理方式

*   40-实现组件更新功能

*   41-实现 nextTick 功能

*   42-编译模块概述

*   43-实现解析插值功能

*   44-实现解析 element

*   45-实现解析 text 功能

*   46-实现解析三种联合类型

*   47-parse 的实现原理&有限状态机

*   48-实现 transform 功能

*   49-实现代码生成 string 类型

*   50-实现代码生成插值类型

*   51-实现代码生成三种联合类型

*   52-实现编译 template 成 render 函数

*   teach-vue-practice-main.zip