什么是单文件组件(SFC)?

单文件组件(Single File Component)是Vue.js的核心特性之一，它将HTML模板、JavaScript逻辑和CSS样式封装在一个.vue后缀的文件中。

想象一下SFC就像一个有3个隔间的盒子：一个放外观设计（模板），一个放功能逻辑（脚本），一个放美化装饰（样式）。这样封装使组件变得整洁有序。

为什么需要SFC?

  • 模块化开发：每个功能模块可以独立开发维护
  • 高内聚：相关代码放在一起，查找修改更方便
  • 语法高亮支持：现代编辑器提供语法高亮和代码提示
  • 预处理器支持：轻松使用Less/Sass/Stylus等CSS预处理器
  • 组件作用域CSS：避免样式全局污染

SFC文件结构解析

<template>
<!– HTML模板在这里 –>
</template>

<script setup>
// JavaScript代码在这里 (Vue3推荐使用setup语法)
</script>

<style scoped>
/* 组件作用域CSS样式在这里 */
</style>
Template (模板)
Script (脚本)
Style (样式)

模板部分 – 定义组件的HTML结构

  • 使用类似HTML的语法，但实际上是Vue的模板语法
  • 必须包含一个根元素（Vue3支持多个根元素）
  • 可以使用Vue指令（v-if, v-for等）
  • 可以使用插值表达式 {{ }} 显示数据
  • 可包含其他组件

创建你的第一个SFC组件

让我们一步一步创建一个简单的按钮组件：

<template>
<button class=“my-btn” @click=“handleClick”>
{{ buttonText }}
</button>
</template>

<script setup>
import { ref } from ‘vue’

// 定义组件的响应式数据
const buttonText = ref(‘点击我!’)

// 定义组件的方法
function handleClick() {
alert(‘按钮被点击了!’)
buttonText.value = ‘已点击’
}
</script>

<style scoped>
/* 只作用于本组件的样式 */
.my-btn {
padding: 10px 20px;
background: #42b883;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background 0.3s;
}

.my-btn:hover {
background: #359c72;
}
</style>

关键点说明：

  • <script setup> 是Vue3推荐的简洁语法
  • ref 用于创建响应式数据
  • scoped 属性确保样式只作用于当前组件
  • 模板中通过 @click 绑定事件处理函数

Vue3 SFC 新特性

Vue2 选项式API

  • data, methods, computed 分开定义
  • 逻辑分散在不同位置
  • 组件复杂时难以维护
  • 代码复用困难

Vue3 组合式API

  • 使用setup函数或<script setup>语法
  • 相关逻辑可以组织在一起
  • 更好的代码复用能力
  • 类型推断更友好

组合式API示例

<script setup>
import { ref, computed, onMounted } from ‘vue’

// 定义响应式状态
const count = ref(0)
const double = computed(() => count.value * 2)

// 定义方法
function increment() {
count.value++
}

// 生命周期钩子
onMounted(() => {
console.log(‘组件已挂载’)
})
</script>

组合式API允许你像编写普通JavaScript函数一样组织代码，相关功能可以写在一起，提高了代码的可读性和可维护性。

样式处理技巧

单文件组件提供了灵活的样式处理方式：

<style>
/* 全局样式 – 会影响所有组件 */
</style>

<style scoped>
/* 局部样式 – 只影响当前组件 */
</style>

<style module>
/* CSS模块 – 提供更可靠的样式隔离 */
</style>

<style lang=“scss”>
/* 使用Sass/SCSS预处理器 */
</style>

注意： 在大型项目中，优先使用scoped样式或CSS模块，避免全局样式污染。

使用SFC的五大优势

模块化

每个组件都是独立模块，便于复用和维护

语法高亮

编辑器支持模板、脚本、样式的高亮显示

作用域样式

避免CSS样式全局污染的问题

预处理器支持

轻松使用TypeScript、SCSS、Pug等

编译优化

Vue编译器可以进行更多优化

常见问题解答（小白必读）

单文件组件必须要用.vue后缀吗？

是的，这是Vue单文件组件的标准命名方式。使用.vue后缀可以让构建工具（如Vite或Webpack）识别并正确处理这些文件。

为什么我的样式会影响其他组件？

如果你没有使用scoped属性，样式默认是全局的。解决方法：

  • 给<style>标签添加scoped属性
  • 使用CSS模块（<style module>）
  • 采用BEM等命名约定避免冲突
.vue文件是如何在浏览器中运行的？

.vue文件不能直接在浏览器中运行，需要构建工具处理：

  1. Vite或Webpack等工具将.vue文件拆分成HTML、JS、CSS
  2. 编译模板为JavaScript渲染函数
  3. 处理样式（添加作用域属性或模块化）
  4. 打包成浏览器可识别的文件
选项式API和组合式API用哪个好？

这取决于项目和个人偏好：

  • 选项式API：更适合初学者，结构清晰，学习曲线平缓
  • 组合式API：适合复杂组件，逻辑复用方便，类型支持更好

Vue3完全支持两种方式，甚至可以在同一个项目中混合使用。