Vue 3源码极客之：`Vue`的`SFC`（单文件组件）编译器：`script`、`template`和`style`的编译流程。

各位观众老爷们，大家好！今天咱来聊聊 Vue 3 源码里那个神秘的 SFC 编译器，也就是单文件组件的幕后英雄。这玩意儿负责把 .vue 文件里的 <script>、<template> 和 <style> 三个部分拆解、编译，最终变成浏览器能理解的 JavaScript 代码。准备好了吗？咱们这就开始一场探险之旅！

一、SFC 编译器：Vue 组件的“翻译官”

首先，咱们得明白，浏览器可看不懂 .vue 文件，它只能执行 JavaScript、HTML 和 CSS。所以，我们需要一个“翻译官”，把 .vue 文件里的内容转换成浏览器能识别的格式。这个“翻译官”就是 Vue 的 SFC 编译器。

简单来说，SFC 编译器的主要任务就是：

1. 解析 (Parse)：把 .vue 文件里的 <template>、<script> 和 <style> 标签提取出来，并识别它们的属性（比如 lang、scoped 等）。
2. 编译 (Compile)：
   • <template>：使用 @vue/compiler-dom 编译成渲染函数 (render function)。
   • <script>：处理 TypeScript、ES modules 等，提取组件选项 (component options)。
   • <style>：处理 CSS 预处理器（Sass、Less 等），添加作用域 CSS (scoped CSS)。
3. 生成 (Generate)：把编译后的结果组合成一个 JavaScript 模块，这个模块导出一个包含渲染函数、组件选项等的对象。

二、源码在哪里？如何启动？

SFC 编译器的核心代码主要位于 @vue/compiler-sfc 包里。如果你想深入研究，可以去 Vue 的 GitHub 仓库里找到它。

启动 SFC 编译器的最常见方式是通过 Vue CLI 或 Vite 等构建工具。这些工具内部都集成了 @vue/compiler-sfc，会在构建过程中自动编译 .vue 文件。

当然，你也可以直接使用 @vue/compiler-sfc 提供的 API 进行手动编译，例如：

const { compile } = require('@vue/compiler-sfc');
const fs = require('fs');

const source = fs.readFileSync('MyComponent.vue', 'utf-8');

const { descriptor, errors } = compile(source, {
  filename: 'MyComponent.vue',
  sourceMap: true,
});

if (errors.length) {
  console.error(errors);
} else {
  console.log(descriptor); // 编译后的结果
}

这段代码读取 MyComponent.vue 文件的内容，然后调用 compile 函数进行编译。编译结果会包含一个 descriptor 对象，里面包含了 <template>、<script> 和 <style> 编译后的信息。

三、<template> 的编译流程：从 HTML 到渲染函数

<template> 的编译是整个 SFC 编译过程中最复杂的部分之一。它涉及到将 HTML 模板转换成高效的渲染函数。这个过程主要由 @vue/compiler-dom 完成。

1. 解析 (Parsing)：

   • 使用 HTML 解析器将 HTML 模板解析成抽象语法树 (AST)。AST 是一种树状结构，用来表示 HTML 模板的语法结构。

2. 转换 (Transforming)：

   • 遍历 AST，进行一系列转换操作，比如：
     • 指令处理 (Directive Processing)：将 v-if、v-for 等指令转换成相应的 JavaScript 代码。
     • 表达式处理 (Expression Processing)：将 {{ message }} 等表达式转换成 JavaScript 表达式。
     • 静态提升 (Static Hoisting)：将静态节点提升到渲染函数外部，避免重复创建。
     • 优化 (Optimization)：进行一些优化操作，比如标记静态节点、避免不必要的更新等。

3. 代码生成 (Code Generation)：

   • 根据转换后的 AST，生成渲染函数 (render function)。渲染函数是一个 JavaScript 函数，它接收组件的数据，并返回一个虚拟 DOM (VNode)。

举个例子，假设我们有这样一个 <template>：

<template>
  <div>
    <p v-if="showMessage">{{ message }}</p>
    <button @click="handleClick">Click me</button>
  </div>
</template>

经过编译后，可能会生成类似这样的渲染函数（简化版）：

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (
    Vue.openBlock(),
    Vue.createElementBlock("div", null, [
      _ctx.showMessage
        ? (Vue.openBlock(), Vue.createElementBlock("p", null, Vue.toDisplayString(_ctx.message), 1 /* TEXT */))
        : Vue.createCommentVNode("v-if", true),
      Vue.createElementBlock(
        "button",
        { onClick: _ctx.handleClick },
        "Click me"
      ),
    ])
  );
}

这个渲染函数使用 Vue 提供的 API（比如 createElementBlock、toDisplayString 等）来创建虚拟 DOM。当组件的数据发生变化时，Vue 会调用这个渲染函数重新生成虚拟 DOM，并与之前的虚拟 DOM 进行比较，找出需要更新的部分，然后更新到真实的 DOM 上。

四、<script> 的编译流程：提取组件选项

<script> 的编译相对简单，主要任务是提取组件选项 (component options)。组件选项是一个 JavaScript 对象，包含了组件的各种配置信息，比如 data、methods、computed、props 等。

1. 解析 (Parsing)：

   • 使用 JavaScript 解析器将 <script> 标签里的代码解析成 AST。

2. 转换 (Transforming)：

   • 遍历 AST，查找 export default 语句，提取导出的对象作为组件选项。
   • 处理 TypeScript 代码，将 TypeScript 代码转换成 JavaScript 代码。
   • 处理 ES modules，将 import 和 export 语句转换成浏览器能理解的格式。
   • 处理 setup 函数，提取 setup 函数返回的值，并将其合并到组件选项中。

举个例子，假设我们有这样一个 <script>：

<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
  methods: {
    handleClick() {
      alert('Clicked!');
    },
  },
  setup() {
    const showMessage = ref(true);
    return {
      showMessage,
    };
  },
};
</script>

经过编译后，会生成类似这样的组件选项对象：

{
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
  methods: {
    handleClick() {
      alert('Clicked!');
    },
  },
  setup() {
    const showMessage = Vue.ref(true);
    return {
      showMessage,
    };
  },
}

这个组件选项对象会被 Vue 的组件实例使用，用来初始化组件的状态、定义组件的行为等。

五、<style> 的编译流程：添加作用域 CSS

<style> 的编译主要任务是处理 CSS 预处理器（Sass、Less 等），并添加作用域 CSS (scoped CSS)。作用域 CSS 可以防止组件的样式影响到其他组件。

1. 解析 (Parsing)：

   • 读取 <style> 标签里的 CSS 代码。
   • 如果使用了 CSS 预处理器（Sass、Less 等），则使用相应的预处理器进行编译。

2. 转换 (Transforming)：

   • 如果 <style> 标签有 scoped 属性，则添加作用域 CSS。
     • 为每个 CSS 规则添加一个唯一的属性选择器，比如 data-v-xxxxxxxx。
     • 为组件的根元素添加一个相同的属性，比如 <div data-v-xxxxxxxx>。

3. 代码生成 (Code Generation)：

   • 将编译后的 CSS 代码插入到 HTML 页面的 <head> 标签里。

举个例子，假设我们有这样一个 <style scoped>：

<style scoped>
.container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

p {
  color: blue;
}
</style>

经过编译后，可能会生成类似这样的 CSS 代码：

.container[data-v-xxxxxxxx] {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

p[data-v-xxxxxxxx] {
  color: blue;
}

同时，组件的根元素会被添加一个 data-v-xxxxxxxx 属性，比如：

<div data-v-xxxxxxxx class="container">
  <p>Hello, Vue!</p>
</div>

这样，只有带有 data-v-xxxxxxxx 属性的元素才会受到这些 CSS 规则的影响，从而实现了作用域 CSS 的效果。

六、编译选项 (Compiler Options)：灵活配置

@vue/compiler-sfc 提供了丰富的编译选项，可以让你灵活地配置编译过程。一些常用的编译选项包括：

选项	类型	描述
filename	string	.vue 文件的文件名，用于生成 source map 和错误信息。
sourceMap	boolean	是否生成 source map。
scoped	boolean	是否为 <style> 标签添加作用域 CSS。
modules	boolean	是否为 <style> 标签生成 CSS Modules。
cssModules	object	CSS Modules 的配置选项。
preprocessOptions	object	CSS 预处理器的配置选项（比如 Sass、Less 等）。
compilerOptions	object	@vue/compiler-dom 的配置选项，用于配置 <template> 的编译过程。
templateCompilerOptions	object	弃用: 使用 compilerOptions 代替.
scriptCompileOptions	object	传递给 transform 函数的选项，用于自定义 <script> 标签的编译过程。
isProduction	boolean	是否处于生产环境。如果为 true，编译器会进行一些优化，比如删除不必要的代码、压缩 CSS 等。默认值为 false。
ssr	boolean	是否为服务器端渲染 (SSR) 进行编译。如果为 true，编译器会生成 SSR 友好的代码。默认值为 false。
inlineTemplate	boolean	是否将 <template> 的内容内联到 <script> 标签里。这可以提高性能，但也会增加代码的体积。默认值为 false。
id	string	组件的唯一 ID，用于生成作用域 CSS 的属性选择器。如果未提供，编译器会自动生成一个。

你可以根据自己的需要，灵活地配置这些编译选项。

七、总结

今天，咱们一起深入了解了 Vue SFC 编译器的内部机制，包括 <template>、<script> 和 <style> 的编译流程。希望通过这次探险之旅，大家对 Vue 组件的编译过程有了更清晰的认识。

记住，理解 SFC 编译器的原理，可以帮助你更好地理解 Vue 组件的工作方式，编写更高效、更可维护的 Vue 代码。

好了，今天的讲座就到这里。感谢大家的观看！如果还有什么疑问，欢迎随时提问。下次再见！