深入分析 Vue 3 源码中 `compiler-sfc` (SFC 编译器) 如何将 “, “, “ 块解析、转换并合并为单个 JavaScript 模块。

各位老铁，大家好！今天咱们来聊聊 Vue 3 SFC 编译器的那些事儿，也就是 compiler-sfc 模块。这玩意儿是 Vue 单文件组件（SFC）的核心，它负责把 .vue 文件里那些 <template>, <script>, <style> 块拆开揉碎，再捏成一个 JavaScript 模块，让浏览器能看懂、能执行。

这就像个魔法师，把你的想法（SFC）变成现实（JS 模块）。别怕，咱们一步一步来，看看这个魔法师到底是怎么施法的。

一、SFC 结构：先来认认门

首先，得知道 SFC 长啥样。一个典型的 .vue 文件大概是这样：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="handleClick">Click me!</button>
  </div>
</template>

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

export default {
  setup() {
    const message = ref('Hello Vue 3!');
    const handleClick = () => {
      message.value = 'Button clicked!';
    };

    return {
      message,
      handleClick,
    };
  },
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>

简单明了，三个主要部分：

<template>: 负责定义组件的 HTML 结构，也就是用户界面。
<script>: 包含组件的 JavaScript 逻辑，比如数据、方法、生命周期钩子等。
<style>: 定义组件的 CSS 样式，让界面更好看。

SFC 编译器就是要处理这些块，把它们变成浏览器能理解的 JavaScript 代码。

二、compiler-sfc 的核心流程：魔法的步骤

compiler-sfc 的主要流程可以分为以下几个步骤：

解析（Parsing）： 把 .vue 文件分解成抽象语法树（AST）。
转换（Transforming）： 对 AST 进行各种转换，比如处理指令、表达式、样式绑定等。
代码生成（Code Generation）： 根据转换后的 AST 生成最终的 JavaScript 代码。

可以用一个表格来概括：

步骤	描述	输入	输出
解析 (Parsing)	使用 HTML 解析器将 `.vue` 文件内容解析成一个 AST。这个 AST 会表示整个 SFC 的结构，包括 template, script, style 等块。同时也负责处理template中的指令，表达式等	`.vue` 文件内容（字符串）	SFC 的 AST (Abstract Syntax Tree)
转换 (Transforming)	对 AST 进行各种转换操作，以便生成可执行的 JavaScript 代码。这包括处理 v-bind, v-if, v-for 等指令，以及将 template 中的表达式转换为 JavaScript 表达式。针对不同的 target （例如 browser, SSR）进行优化。	SFC 的 AST	转换后的 AST
代码生成 (Code Generation)	根据转换后的 AST 生成最终的 JavaScript 代码。这包括将 template 转换为渲染函数，将 script 中的逻辑提取出来，并将 style 中的 CSS 插入到页面中。最终生成的代码是一个 JavaScript 模块，可以被 Vue 应用加载和使用。	转换后的 AST	JavaScript 代码（字符串）

三、源码剖析：深入魔法的细节

现在，咱们深入源码，看看这些步骤是怎么实现的。

1. 解析（Parsing）

compiler-sfc 使用 HTML 解析器（通常是 vue-template-compiler 或 @vue/compiler-dom）将 .vue 文件解析成 AST。这个过程大致如下：

import { parse } from '@vue/compiler-dom';

const source = `<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello'
    }
  }
}
</script>`;

const ast = parse(source);

console.log(ast); // 输出 AST

parse 函数会将输入的字符串解析成一个 AST，它是一个树状结构，表示了 .vue 文件的语法结构。例如，对于上面的例子，AST 可能会包含一个根节点，它有 template 和 script 两个子节点。template 节点又会有 div 节点和文本节点等。

2. 转换（Transforming）

转换阶段是整个编译过程的核心。compiler-sfc 会遍历 AST，对不同的节点进行不同的处理。例如：

处理指令： 像 v-bind、v-if、v-for 这样的指令会被转换成相应的 JavaScript 代码。
处理表达式： {{ message }} 这样的表达式会被转换成访问组件数据的代码。
处理样式绑定： style 属性中的动态值会被转换成响应式的样式绑定。

compiler-sfc 使用一系列的转换器（transformers）来完成这些任务。每个转换器负责处理一种特定的节点或指令。例如，有一个转换器专门处理 v-bind 指令，另一个转换器专门处理 v-if 指令。

转换过程大致如下：

import { transform } from '@vue/compiler-dom';
import { transformElement } from '@vue/compiler-dom';
import { transformVBind } from '@vue/compiler-dom';
import { transformVIf } from '@vue/compiler-dom';

const ast = parse(source);

transform(ast, {
  nodeTransforms: [
    transformElement, // 处理元素节点
    transformVBind,    // 处理 v-bind 指令
    transformVIf       // 处理 v-if 指令
  ]
});

console.log(ast); // 输出转换后的 AST

在这个例子中，transform 函数接收 AST 和一个配置对象作为参数。配置对象中的 nodeTransforms 数组指定了要使用的转换器。transform 函数会遍历 AST，对每个节点依次调用这些转换器。

具体例子：v-bind 指令的转换

假设我们有以下模板代码：

<div v-bind:class="isActive ? 'active' : 'inactive'"></div>

transformVBind 转换器会将这个 v-bind 指令转换成以下 JavaScript 代码：

{
  type: 8, // NodeTypes.ATTRIBUTE
  name: 'class',
  value: {
    type: 4, // NodeTypes.SIMPLE_EXPRESSION
    content: 'isActive ? "active" : "inactive"',
    isStatic: false
  }
}

这个转换后的 AST 节点表示 class 属性的值是一个动态的 JavaScript 表达式。在代码生成阶段，这个表达式会被转换成相应的渲染函数代码。

3. 代码生成（Code Generation）

代码生成阶段会将转换后的 AST 转换成 JavaScript 代码。compiler-sfc 使用一个代码生成器（code generator）来完成这个任务。代码生成器会遍历 AST，根据不同的节点类型生成不同的代码。

例如：

组件选项： script 块中的组件选项会被转换成一个 JavaScript 对象。
渲染函数： template 块会被转换成一个渲染函数，用于生成虚拟 DOM。
样式： style 块会被提取出来，添加到组件的 CSS 中。

代码生成过程大致如下：

import { generate } from '@vue/compiler-dom';

const ast = parse(source);
transform(ast, {
  nodeTransforms: [
    transformElement,
    transformVBind,
    transformVIf
  ]
});

const code = generate(ast);

console.log(code.code); // 输出生成的 JavaScript 代码

generate 函数接收转换后的 AST 作为参数，返回一个包含生成的 JavaScript 代码的对象。code.code 属性就是最终的 JavaScript 代码。

代码生成实例

以上面的模板为例：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="handleClick">Click me!</button>
  </div>
</template>

经过代码生成，可能会得到类似下面的渲染函数：

import { openBlock, createElementBlock, toDisplayString, createElement, defineComponent } from 'vue';

const _hoisted_1 = /*#__PURE__*/createElementVNode("h1", null, "Hello Vue 3!", -1 /* HOISTED */);

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (openBlock(), createElementBlock("div", null, [
    _hoisted_1,
    createElement("button", { onClick: _ctx.handleClick }, "Click me!")
  ]))
}

export default defineComponent({
    setup(){
        const message = ref('Hello Vue 3!')
        const handleClick = () => {
            message.value = 'Button clicked!'
        }

        return {
            message,
            handleClick
        }
    },
    render
})

四、模块合并：把碎片拼成完整

最后，compiler-sfc 会将生成的 JavaScript 代码、渲染函数、样式等合并成一个完整的 JavaScript 模块。这个模块可以被 Vue 应用加载和使用。

合并过程通常包括以下步骤：

提取组件选项： 从 script 块中提取组件选项（例如 data、methods、computed 等）。
创建渲染函数： 根据 template 块生成渲染函数。
处理样式： 将 style 块中的 CSS 添加到组件的样式中（通常是通过动态创建 <style> 标签）。
合并： 将组件选项、渲染函数和样式合并成一个 JavaScript 模块。

例如：

import { compile } from 'vue/compiler-sfc'

const { descriptor } = compile(source)

const script = descriptor.script.content
const template = descriptor.template.content
const styles = descriptor.styles.map(style => style.content).join('n')

// 提取组件选项、渲染函数、样式等
// ...

// 合并成一个 JavaScript 模块
const moduleCode = `
  ${script}

  const render = () => {
    // 渲染函数
    ${template}
  };

  export default {
    ...scriptOptions,
    render,
    styles: `${styles}`
  };
`;

console.log(moduleCode); // 输出最终的 JavaScript 模块代码

五、SFCDescriptor：编译结果的容器

在编译过程中，compiler-sfc 会使用一个名为 SFCDescriptor 的对象来存储编译结果。SFCDescriptor 包含了以下信息：

template：模板块的信息，包括内容、AST 等。
script：脚本块的信息，包括内容、AST 等。
styles：样式块的信息，包括内容、是否是 scoped CSS 等。
customBlocks：自定义块的信息。

SFCDescriptor 可以看作是编译结果的容器，它包含了所有需要的信息，可以方便地进行后续的处理。

六、总结：魔法的本质

compiler-sfc 的本质就是把 .vue 文件中的 HTML、JavaScript 和 CSS 代码转换成浏览器可以理解的 JavaScript 代码。它通过解析、转换和代码生成三个步骤，将 SFC 转换成一个可执行的 JavaScript 模块。

这个过程涉及到了很多复杂的概念和技术，例如 AST、转换器、代码生成器等。但是，只要理解了核心流程，就可以更好地理解 compiler-sfc 的工作原理，从而更好地使用 Vue.js。

七、代码示例：一个简化的 SFC 编译器

为了更好地理解 compiler-sfc 的工作原理，咱们可以写一个简化的 SFC 编译器。这个编译器只处理最简单的 SFC，但是可以帮助我们理解核心流程。

function compileSFC(source) {
  // 1. 解析
  const template = source.match(/<template>(.*?)</template>/s)[1];
  const script = source.match(/<script>(.*?)</script>/s)[1];
  const style = source.match(/<style>(.*?)</style>/s)?.[1] || '';

  // 2. 转换 (简化)
  const renderFunction = `
    return `<div>${template}</div>`;
  `;

  // 3. 代码生成
  const moduleCode = `
    ${script}

    const render = () => {
      ${renderFunction}
    };

    export default {
      render,
      template: `${template}`,
      styles: `${style}`
    };
  `;

  return moduleCode;
}

// 测试
const source = `
<template>
  <h1>{{ message }}</h1>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello'
    }
  }
}
</script>
<style>
h1 {
  color: red;
}
</style>
`;

const compiledCode = compileSFC(source);
console.log(compiledCode);

这个简化的 SFC 编译器只使用了正则表达式来解析 SFC，没有使用 AST。转换阶段也只是简单地将模板代码嵌入到渲染函数中。但是，它可以帮助我们理解 SFC 编译器的基本流程。

八、注意事项

compiler-sfc 的源码非常复杂，涉及到很多高级的编译技术。本文只是对核心流程进行了简单的介绍。
compiler-sfc 的具体实现会随着 Vue.js 的版本更新而变化。
理解 compiler-sfc 的工作原理可以帮助我们更好地理解 Vue.js 的内部机制，从而更好地使用 Vue.js。

好了，今天的讲座就到这里。希望大家对 Vue 3 SFC 编译器有了更深入的理解。记住，编程就像魔法，只要掌握了咒语（代码），就能创造出无限可能！下次有机会再跟大家分享其他有趣的编程知识。各位，拜拜！

发表回复 取消回复

发表回复取消回复