Vue3 单文件组件

一个组件的模板、脚本、样式若拆成三个文件维护会非常割裂。单文件组件（Single File Component，简称 SFC）把三者写进同一个 .vue 文件，结构一目了然；配合构建工具还能获得语法高亮、热更新等开发体验，是 Vue 项目中组织组件的主流方式。

为什么用 SFC

• 就近维护：模板、逻辑、样式同屏查看，改一处即可。
• 编译期优化：模板会被编译成高效的渲染函数，性能更好。
• 生态支持：热重载、ESLint 检查、TypeScript 支持开箱即用。

一个完整的 .vue 文件

<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  data() {
    return { message: '你好，Vue3' }
  },
}
</script>

<style>
p { color: #42b983; }
</style>

template 负责结构，script 负责逻辑，style 负责样式，三个区块各司其职。

script setup 推荐写法

<script setup> 是组合式 API 的语法糖，顶层声明自动暴露给模板：

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

const message = ref('你好，Vue3')
</script>

<template>
  <p>{{ message }}</p>
</template>

不需要 return、不需要 export default，代码量明显减少。

scoped 局部样式

给 style 加上 scoped，样式就只作用于当前组件：

<style scoped>
.title { font-size: 20px; color: #333; }
</style>

编译后选择器会被加上唯一的 data 属性，避免样式互相污染。

使用子组件

父组件引入即注册，模板中以标签形式使用并传递属性：

<script setup>
import BlogCard from './BlogCard.vue'   // 引入子组件

const title = '组合式 API 入门'
</script>

<template>
  <BlogCard :title="title" />
</template>

子组件通过 props 接收 title，实现父子组件间的数据传递。

小结

SFC 是 Vue 开发的基本单元，日常开发几乎都在写 .vue 文件。把 <script setup>、scoped 样式与组件嵌套用好，就掌握了现代 Vue 项目最常见的组织方式。