vue3 -- @vue/compiler-sfc 工具源码解读
💡
原文中文，约7800字，阅读约需19分钟。
📝
内容提要
本文介绍了 Vue 3 中 @vue/compiler-sfc 工具的源码解析，包括接收模板内容和配置、构建缓存、生成描述对象、使用编译器解析 AST、处理不同类型的节点（如 template、script、style），以及进行 CSS 变量绑定和样式覆盖检查，最后将结果缓存并返回。
🎯
关键要点
- Vue 3 中 @vue/compiler-sfc 工具接收模板内容和配置作为参数。
- 构建缓存机制，通过唯一的 key 来存储和获取解析结果。
- 生成描述对象，包括文件名、源内容、模板、脚本、样式等信息。
- 使用编译器解析 AST，处理不同类型的节点，如 template、script 和 style。
- 对 CSS 内容进行二次处理，包括变量绑定和样式覆盖检查。
- 处理完毕后将结果缓存并返回，包括描述对象和错误信息。
❓
延伸问答
Vue 3 中 @vue/compiler-sfc 工具的主要功能是什么？
该工具主要用于解析 Vue 单文件组件的模板内容和配置，生成描述对象，并处理不同类型的节点。
如何在 @vue/compiler-sfc 中实现缓存机制？
通过构造唯一的 key 来存储和获取解析结果，从而实现缓存机制。
@vue/compiler-sfc 如何处理 CSS 内容？
它对 CSS 内容进行二次处理，包括变量绑定和样式覆盖检查。
在 @vue/compiler-sfc 中，如何生成描述对象？
描述对象包括文件名、源内容、模板、脚本、样式等信息，通过解析后的结果构造而成。
如何使用编译器解析 AST？
使用编译器的 parse 方法解析源代码，获取 AST 结果后进行节点类型的处理。
@vue/compiler-sfc 支持哪些类型的节点处理？
支持处理 template、script 和 style 等不同类型的节点。
➡️
