Vue 3 技术揭秘

如果你已经在写 Vue 3，但遇到报错只能靠搜、靠猜、靠改写法试出来，这门课就是给你补那块空白的。它不教你怎么再写一遍 todo list，而是拆开 Vue 3 的内部，看响应式、渲染器、编译器这三条主线各自在做什么、彼此怎么接上。看完你不会变成源码贡献者，但至少能回答：为什么我这段代码触发了更新，为什么那次更新没触发，为什么这个写法在列表里更贵。

先确认你缺的是哪一块

Vue 3 用起来不难，难的是出问题时的定位。常见的三种卡壳：一是响应式失灵，改了数据视图不动，或者动了太多次；二是组件更新范围失控，明明只变了一个字段，整棵子树都在重渲染；三是模板里的写法在编译后变成了什么，说不清楚，所以优化只能凭感觉。

这门课把 Vue 3 拆成五块来讲，渲染器、响应式、编译器、编译时优化、内置能力的运作方式。它不是按 API 手册的顺序走，而是按「一个数据变化，如何一路走到 DOM 更新」的顺序走。跟着这条链看下去，你会知道每一环的输入输出是什么，哪一环出了问题该往哪查。

渲染器：一次更新到底做了什么

渲染器是整个链路的下游。你需要弄清楚挂载和更新的分界在哪里，虚拟节点树的对比是按什么规则走的，key 在其中起什么作用。很多人对 diff 的印象停留在「快的算法」，但实际写代码时，真正影响性能的是更新粒度和节点复用方式。

这一块看完，你应该能回答：为什么列表里用索引当 key 会出错；为什么某些场景下加一层 Fragment 或抽成组件反而更快；v-if 和 v-show 在更新开销上的差别从哪来。这些不是背结论，而是能自己推。

响应式：和 Vue 2 的差别不只是 API

Vue 2 用 defineProperty 递归劫持，Vue 3 换成 Proxy 加依赖收集。差别不只是「能检测数组下标」这么简单，而是收集时机、依赖存储结构、以及 effect 的调度方式都变了。这一块是排查「为什么没更新」的第一现场。

你要建立的认知是：谁在读、谁被记下来、谁在写、谁被通知。这三个问题的答案决定了你是不是踩了响应式丢失。看完应能解释：为什么解构 props 或 reactive 对象会丢响应；为什么 watch 和 watchEffect 的触发时机不同；nextTick 到底在等什么。

编译器与编译时优化

这是 Vue 3 相对 Vue 2 最大的变化之一，也是最容易被跳过的一块。模板在构建时就被分析过，静态的部分被提升，动态的部分被打上标记，更新时可以跳过整片静态节点。你写的模板结构，直接决定了这些优化能不能落到你身上。

这一块的目标不是让你会写编译器，而是让你在写模板时心里有数：哪些写法能吃到编译时优化，哪些会把动态范围撑大。比如为什么把一段结构抽成独立组件可能更划算，为什么在模板里塞复杂表达式会让更新变贵。看完你应该能看懂编译产物的大致形状，而不是把它当黑盒。

学完之后，拿这几个问题自测

• 一次数据变更，从触发到 DOM 更新，中间经过了哪几个阶段，各自负责什么？
• 什么情况下响应式会失效，你在项目里遇到过的属于哪一类？
• 列表渲染的 key 为什么影响正确性和性能，选错了会怎样？
• 模板里哪些写法能触发编译时优化，哪些会破坏它？
• nextTick、watch、watchEffect 三者的时机差异，分别在什么场景用？

如果这几个问题你现在答不全，那就按模块顺序看，每看完一块回来对一遍。这门课的价值不在看完，而在你能拿它去解释自己项目里那些「说不清为什么」的更新行为。配合动手改一改精简后的核心源码，效果比只看讲解好得多。