SFC 编译

SFC 编译概述

SFC 编译过程将 Vue 单文件组件转换为可执行的 JavaScript 和 CSS。这包括解析 SFC 文件，独立处理每个块，然后合并结果。

来源

SFC 解析

第一步是使用 parse 函数将 .vue 文件解析为各个块，该函数返回一个包含所有块及其元数据的 SFCDescriptor。

解析器处理

从每个块中提取内容
处理块属性（例如 lang="ts" 或 scoped）
创建源映射以进行准确调试
检测 <style> 块中使用的 CSS 变量

来源

脚本编译

脚本编译使用 compileScript 函数处理 <script> 和 <script setup> 块。这是 SFC 编译系统中最复杂的部分之一。

脚本编译的关键方面

导入处理:
- 提升和去重导入
- 处理别名导入
- Vue 导入的特殊处理
宏处理:
- 将 defineProps 转换为运行时 props 声明
- 处理 defineEmits、defineExpose 等
- 宏的 TypeScript 集成
绑定分析:
- 创建有关变量（props、refs、constants）的元数据
- 稍后由模板编译器用于优化
代码生成:
- 创建 setup() 函数
- 处理 TypeScript 类型
- 生成正确的导出

来源

模板编译

模板编译使用 compileTemplate 函数将 <template> 部分转换为渲染函数。

模板编译包括

预处理 Pug 等模板语言
将模板解析为抽象语法树 (AST)
转换指令 (v-if, v-for 等)
处理资源 URL (src 属性等)
静态提升以进行性能优化
生成带有正确源映射的渲染函数

来源

表达式转换

模板编译的一个关键部分是将模板中的表达式（例如 {{ variable }} 或 :prop="expression"）转换为它们，以确保它们能与 Vue 的响应式系统正确协同工作。

这种转换确保

Props 中的变量通过 __props 访问
Refs 在需要时使用 .value 访问
全局变量保持不变
其他组件状态通过 _ctx 访问
局部变量（来自 v-for 等）保持不变

来源

CSS 处理

SFC 中的样式块经过特殊处理，以支持作用域样式和 CSS 变量。

CSS 处理的关键特性

带唯一组件 ID 的作用域 CSS 选择器
支持 CSS 中的 v-bind() 进行响应式样式设置
与 setup 函数集成以处理 CSS 变量
支持 CSS 预处理器

来源

绑定类型与优化

SFC 编译器利用绑定信息来优化生成的代码，尤其是在模板中。

了解这些绑定类型可以让编译器

正确处理 refs（在需要时自动访问 .value）
通过提升来优化常量值
根据值类型应用正确的修补策略
生成更高效的模板访问代码

来源

Script Setup 特性

SFC 的 .vue 语法是 Vue SFC 的一项关键特性，它简化了组件的编写。编译器为这种语法处理了多项特殊特性

Script setup 编译的关键方面

将 defineProps 等宏转换为等效的运行时代码
自动将顶级变量暴露给模板
props 和 emits 的类型推断
与标准 .vue 块集成（当两者都存在时）

来源

编译输出

SFC 编译的最终输出主要包括三个部分：

JavaScript 代码:
- 组件定义及 setup 函数
- 模板渲染函数
- Props 和 emits 声明
CSS 输出:
- 作用域或全局样式
- 用于响应式样式的 CSS 变量
源映射:
- 用于准确调试编译后的代码

SFC 编译器负责集成这些输出，确保它们在运行时无缝协同工作。

来源

高级特性

SFC 编译器支持多种高级特性，超越了基本编译

TypeScript 集成:
- 完全支持脚本和模板中的 TypeScript
- props 和 emits 的类型推断
- 类型化的插槽
预处理器支持:
- 模板预处理器（Pug 等）
- 样式预处理器（SCSS、Less 等）
源映射:
- 用于调试的准确源映射
- 原始代码和编译后代码之间的行映射
HMR 优化:
- 对热模块替换的特殊处理
- 根据内容更改进行强制重新加载的决策
资源 URL 转换:
- 处理模板和样式中的 URL
- 资源路径解析

来源

通过提供全面且集成的单文件组件编译方法，Vue 的 SFC 编译器在 Vue 应用程序的开发者体验和运行时性能方面起着至关重要的作用。