24. 单文件组件（SFC）

SFC 是什么

单文件组件（Single-File Component，简称 SFC）就是把一个组件的模板、逻辑、样式写在同一个 .vue 文件里：

<script setup>
import { ref } from 'vue'
const greeting = ref('Hello World!')
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

HTML、CSS、JavaScript 三件套合并在一个文件，关注点天然聚合。

文件结构

一个 .vue 文件由三个顶层块组成：

块	作用	是否必须
<template>	组件模板（HTML 结构）	是
<script>	组件逻辑（JavaScript）	是
<style>	组件样式（CSS）	否

<script> 有两种写法：

<!-- 普通 script -->
<script>
export default {
  data() { return { count: 0 } }
}
</script>

<!-- script setup——更简洁 -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<style> 可以加 scoped 让样式只作用于当前组件：

<style scoped>
.greeting {
  color: red;
}
</style>

SFC 怎么变成 JavaScript

.vue 文件浏览器不认识，需要编译。@vue/compiler-sfc 把 .vue 文件拆成独立的 HTML、CSS、JavaScript 模块：

// 编译后就是一个标准的 ES 模块
import MyComponent from './MyComponent.vue'

开发时，样式会作为 <style> 标签注入页面，支持热更新。生产构建时，样式会被提取到单独的 CSS 文件。

SFC 的优势

1. 关注点聚合

模板、逻辑、样式在同一个文件。改组件时不用在三个文件间跳来跳去。

2. 预编译模板

模板在构建时就编译好了，运行时不需要编译器，体积小、速度快。

3. 组件作用域 CSS

加 scoped 后，样式只影响当前组件，不会污染全局。

4. 更好的 IDE 支持

Volar 等插件能提供模板内的自动补全、类型检查、跳转定义。

5. 编译期优化

Vue 的编译器能分析模板和脚本，做静态提升等优化。

为什么不是”分离文件”

传统思路说”HTML、CSS、JS 要分开”。但在组件化开发里，按文件类型分离并不合理：

• 现代 UI 是按组件拆的，不是按文件类型
• 一个组件的模板、逻辑、样式天然是耦合的
• 分开到三个文件，改一个组件要开三个 tab

“关注点分离”不等于”文件类型分离”。SFC 按组件聚合，其实更符合维护需求。

如果你确实想用分离文件，SFC 支持 src 导入：

<template src="./template.html"></template>
<script src="./script.js"></script>
<style src="./style.css"></style>

适用场景

场景	是否推荐 SFC
SPA 应用	强烈推荐
SSG 静态站点	强烈推荐
复杂前端项目	推荐
简单的静态页面	可以用 CDN 方式
增强少量交互	考虑 petite-vue

本节回顾

• SFC 把模板、逻辑、样式写在同一个 .vue 文件
• 需要 @vue/compiler-sfc 编译成标准 JS
• 优势：聚合关注点、预编译、作用域 CSS、IDE 支持
• SFC 是 Vue 项目的标准开发方式
• 不编译的场景可以用 CDN 方式或 petite-vue