Skip to content

深入

这一章默认你已经接受了一件事:

Vue 不是一组零散 API,而是一套由编译器、运行时、响应式系统和工程工具共同组成的体系。

前面的章节解决的是“看得懂 Vue 的表层写法”,这里要继续往里走,开始碰更接近实现细节的问题。

这一章关注什么

  • Vue 响应式系统在运行时是怎样精确追踪依赖的
  • Vue 如何在编译时利用 TypeScript 类型信息
  • 自定义编译能力是怎样插入现有流程的
  • 模板、AST、运行时辅助函数之间如何建立映射
  • 为什么有些高级能力只能通过编译器扩展实现

先建立一个基本前提

Vue 的虚拟 DOM 核心是 VNode(Virtual Node)。

模板最终会被编译成 VNode 创建调用,运行时再基于这些 VNode 做挂载、更新和最小化 DOM 变更。理解这一点之后,再去看类型提取、编译宏、自定义编译时指令,会更容易把“高级能力”放回正确的位置。

VNode 创建相关源码可参考:

https://github.com/vuejs/core/blob/a23fb59e83c8b65b27eaa21964c8baa217ab0573/packages/runtime-core/src/vnode.ts#L282

本章内容

适合怎样阅读

这一章不太适合“只看结论”。

建议边看边做两件事:

  1. 对照 Vue core 仓库对应实现
  2. 在本项目里尝试修改示例,验证编译结果是否符合预期

如果你已经开始关心“能不能把自己的工程规则前置到编译阶段”,这一章会更有价值。

建议阅读顺序

  1. 先读 Vue 3 响应式系统的实现原理,把运行时更新机制补清楚
  2. 再读 类型推导与提取,理解编译器怎样读取类型信息
  3. 再读 自定义编译时指令,看如何扩展编译器行为
  4. 最后把 为什么 React 市占率比 Vue 高 当作补充阅读,帮助你从生态与工业体系层理解框架传播

按问题切入

本章小结

这一章的核心不是“掌握更多 API”,而是开始进入 Vue 的实现层:

  • 运行时怎样追踪依赖
  • 编译器怎样读取类型
  • 模板语法怎样被扩展

到这里,你已经不只是“会用 Vue”,而是在逐步建立“能解释 Vue 为什么这样设计”的能力。

下一章建议

如果你希望把这些原理继续落回实际工程,可以回到 构建组件库 章节,看这些认知如何反过来影响组件库设计与构建。

Released under the CC BY-NC-SA 4.0 License.