各位观众老爷们，大家好！欢迎来到“Vue 3 源码极客”系列讲座。今天咱们聊点硬核的，直接扒开 Vue 3 的胸膛，看看它的 template 解析器是如何处理 template 里面的 <script> 和 <style> 标签的。
都说 Vue 是渐进式框架，但它的内部机制可一点都不“渐进”。template 解析器是 Vue 编译器的核心组件之一，负责将你写的 template 代码转换成渲染函数。而 <script> 和 <style> 标签，作为 template 中的“异类”，自然也需要特殊的处理方式。
准备好了吗？开始发车！
一、<script> 和 <style>：template 里的“寄生虫”？
先来思考一个问题：为什么 <script> 和 <style> 会出现在 template 里面？
- 单文件组件 (SFC): 这是最常见的情况。Vue 的 SFC 允许你把 HTML、JavaScript 和 CSS 统统塞到一个
.vue文件里，方便管理。 - 动态组件: 有时候，你可能需要根据不同的条件渲染不同的组件，而这些组件的
template可能包含自己的<script>和<style>。
但问题来了，template 的主要职责是描述 UI 结构，JavaScript 和 CSS 属于逻辑和样式，应该尽量和 UI 结构解耦。所以，Vue 在解析 template 时，会对 <script> 和 <style> 进行特殊处理，把它们从 template 的主干上“剥离”出来。
二、template 解析器：抽丝剥茧的艺术
Vue 的 template 解析器（也叫 HTML Parser）是一个状态机。它从头到尾扫描 template 字符串，根据不同的状态（比如：在标签内、在文本内、在注释内等等）执行不同的操作。
简单来说，解析器就像一个“侦探”，它会不断地问自己：“我现在在哪儿？接下来会发生什么？”
当解析器遇到 <script> 和 <style> 标签时，它会进入相应的“特殊状态”，然后把标签内部的内容提取出来。
三、代码说话：庖丁解牛般地分析源码
咱们直接看代码，了解 Vue 是如何处理 <script> 和 <style> 的。
（由于直接贴出所有源码会显得过于臃肿，这里只展示关键部分，并辅以解释。）
// 假设这是简化版的 parse 函数
function parse(template: string, options: ParserOptions): RootNode {
const context = createParseContext(template, options); // 创建解析上下文
const root = createRoot(parseChildren(context, [])); // 解析子节点
return root;
}
function parseChildren(context: ParseContext, ancestors: ElementNode[]): TemplateChildNode[] {
const nodes: TemplateChildNode[] = [];
while (!isEnd(context, ancestors)) {
const s = context.source;
let node: TemplateChildNode | undefined = undefined;
if (s.startsWith('<!--')) {
// 处理注释
node = parseComment(context);
} else if (s.startsWith('<')) {
if (s.startsWith('</')) {
// 处理闭合标签
// ...
} else if (s.startsWith('<script')) {
// 处理 script 标签
node = parseScript(context, ancestors);
} else if (s.startsWith('<style')) {
// 处理 style 标签
node = parseStyle(context, ancestors);
} else {
// 处理普通标签
node = parseElement(context, ancestors);
}
} else if (s.length === 0) {
break;
} else {
// 处理文本节点
node = parseText(context);
}
if (node) {
nodes.push(node);
}
}
return nodes;
}这段代码是 parseChildren 函数的简化版本，它负责解析 template 中的子节点。关键点在于，当遇到 <script 或 <style 开头的字符串时，它会分别调用 parseScript 和 parseStyle 函数。
接下来，我们看看 parseScript 和 parseStyle 的实现（同样是简化版）：
function parseScript(context: ParseContext, ancestors: ElementNode[]): ElementNode {
const start = getCursor(context); // 获取当前位置
const openTag = parseTag(context, TagType.Start); // 解析 <script> 标签
const content = parseTextData(context, 'script'); // 提取 <script> 标签的内容
const closeTag = parseTag(context, TagType.End); // 解析 </script> 标签
const scriptNode: ElementNode = {
type: NodeTypes.ELEMENT,
tag: 'script',
props: openTag.props,
children: [
{
type: NodeTypes.TEXT,
content: content,
loc: {
start: advancePositionWithClone(openTag.loc.end, content),
end: closeTag.loc.start,
source: content
}
}
],
loc: {
start: start.loc.start,
end: closeTag.loc.end,
source: getSelection(context, start.loc.start, closeTag.loc.end)
}
};
return scriptNode;
}
function parseStyle(context: ParseContext, ancestors: ElementNode[]): ElementNode {
const start = getCursor(context);
const openTag = parseTag(context, TagType.Start);
const content = parseTextData(context, 'style'); // 提取 <style> 标签的内容
const closeTag = parseTag(context, TagType.End);
const styleNode: ElementNode = {
type: NodeTypes.ELEMENT,
tag: 'style',
props: openTag.props,
children: [
{
type: NodeTypes.TEXT,
content: content,
loc: {
start: advancePositionWithClone(openTag.loc.end, content),
end: closeTag.loc.start,
source: content
}
}
],
loc: {
start: start.loc.start,
end: closeTag.loc.end,
source: getSelection(context, start.loc.start, closeTag.loc.end)
}
};
return styleNode;
}
function parseTextData(context: ParseContext, endTag: string): string {
const start = getCursor(context);
const endIndex = context.source.indexOf(`</${endTag}>`);
const content = context.source.slice(0, endIndex);
advanceBy(context, content.length);
return content;
}
function advanceBy(context: ParseContext, numberOfCharacters: number): void {
const s = context.source;
advancePositionWithMutation(context.loc, s, numberOfCharacters);
context.source = s.slice(numberOfCharacters);
}这两个函数的主要逻辑是：
- 解析开始标签： 使用
parseTag解析<script>或<style>的开始标签，提取标签上的属性。 - 提取内容： 使用
parseTextData提取标签内部的内容（也就是 JavaScript 或 CSS 代码）。 - 解析结束标签： 使用
parseTag解析</script>或</style>的结束标签。 - 创建节点： 创建一个代表
<script>或<style>标签的 AST 节点，并将提取到的内容作为子节点。
注意： parseTextData 函数会查找结束标签的位置，然后把开始标签和结束标签之间的内容提取出来。这说明 Vue 假设 <script> 和 <style> 标签是成对出现的，并且内部不能包含其他标签。
四、AST：代码的“骨架”
经过 template 解析器的处理，<script> 和 <style> 标签会被转换成抽象语法树 (AST) 节点。AST 是一种树状结构，用于描述代码的语法结构。
对于 <script> 和 <style> 标签，生成的 AST 节点类型是 ElementNode，它的 tag 属性分别是 'script' 和 'style'，props 属性包含了标签上的属性，children 属性包含了标签内部的内容。
例如，对于下面的 template：
<template>
<div>
<script>
console.log('Hello, world!');
</script>
<style scoped>
.red {
color: red;
}
</style>
</div>
</template>生成的 AST 结构大致如下（简化版）：
{
type: NodeTypes.ROOT,
children: [
{
type: NodeTypes.ELEMENT,
tag: 'div',
children: [
{
type: NodeTypes.ELEMENT,
tag: 'script',
props: [],
children: [
{
type: NodeTypes.TEXT,
content: "console.log('Hello, world!');"
}
]
},
{
type: NodeTypes.ELEMENT,
tag: 'style',
props: [{ name: 'scoped', value: true }],
children: [
{
type: NodeTypes.TEXT,
content: ".red {n color: red;n}"
}
]
}
]
}
]
}可以看到，<script> 和 <style> 标签都被转换成了 ElementNode，它们的内部内容被转换成了 TextNode，作为 ElementNode 的子节点。
五、后续处理：各司其职，各安天命
生成 AST 之后，Vue 编译器会继续对 AST 进行转换，最终生成渲染函数。
那么，<script> 和 <style> 标签的 AST 节点会被如何处理呢？
<script>标签： Vue 会提取<script>标签的内容，将其作为组件的 JavaScript 代码。如果是单文件组件，这部分代码会被传递给webpack或其他构建工具进行处理。<style>标签： Vue 会提取<style>标签的内容，将其作为组件的 CSS 代码。如果是单文件组件，Vue 会根据<style>标签上的属性（比如scoped）进行相应的处理，比如添加 CSS Scope，以避免样式冲突。
换句话说，<script> 和 <style> 标签在 template 解析阶段只是被简单地提取出来，真正发挥作用是在后续的编译阶段。
六、scoped 属性：CSS 的“结界”
scoped 属性是 Vue 中一个非常有用的特性，它可以让 CSS 样式只作用于当前组件，避免与其他组件的样式冲突。
当 <style> 标签上使用了 scoped 属性时，Vue 会在编译阶段对 CSS 代码进行转换，为每个 CSS 规则添加一个唯一的 CSS Scope。
例如，对于下面的 template：
<template>
<div>
<p class="red">This is a red paragraph.</p>
</div>
</template>
<style scoped>
.red {
color: red;
}
</style>Vue 会将 CSS 代码转换成类似下面的形式：
.red[data-v-f3f3eg9] {
color: red;
}同时，Vue 也会在 HTML 元素上添加一个对应的 data-v-f3f3eg9 属性：
<div data-v-f3f3eg9>
<p class="red" data-v-f3f3eg9>This is a red paragraph.</p>
</div>这样，只有带有 data-v-f3f3eg9 属性的元素才能应用这个 CSS 规则，从而实现了样式的隔离。
七、总结：抽丝剥茧，化繁为简
总而言之，Vue 的 template 解析器在处理 <script> 和 <style> 标签时，主要做了以下几件事：
- 识别： 通过字符串匹配，识别出
<script>和<style>标签。 - 提取： 提取标签上的属性和标签内部的内容。
- 创建： 创建代表
<script>和<style>标签的 AST 节点。 - 后续处理： 将 AST 节点传递给后续的编译阶段，进行进一步处理。
这个过程看似简单，但却体现了 Vue 编译器设计的精妙之处。它将复杂的编译过程分解成多个独立的步骤，每个步骤只负责完成特定的任务，从而降低了代码的复杂度和维护成本。
八、思考题：
- Vue 3 中，如何处理
<template>标签中的lang属性？例如<template lang="pug">。 - 除了
<script>和<style>，template中还可能出现哪些特殊标签？Vue 是如何处理它们的？ template解析器在处理错误标签（比如没有闭合的标签）时，会采取什么策略？
好了，今天的讲座就到这里。希望大家通过今天的学习，对 Vue 3 的 template 解析器有了更深入的了解。下课！