单文件组件(SFC)

https://cn.vuejs.org/guide/scaling-up/sfc.html

一、单文件组件(SFC)是什么？

Vue 的单文件组件 (即*.vue文件，英文 Single-File Component，简称SFC) 是一种特殊的文件格式，使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。

下面是一个单文件组件的示例：

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>

vue 官网总结的话：

Vue 的单文件组件是网页开发中 HTML、CSS 和 JavaScript 三种语言经典组合的自然延伸。

<template>、<script>和<style>三个块在同一个文件中封装、组合了组件的视图、逻辑和样式。完整的语法定义可以查阅SFC 语法说明。

二、为什么要用 SFC

使用 SFC 必须使用构建工具，但作为回报带来了以下优点：

• • 使用熟悉的 HTML、CSS 和 JavaScript 语法编写模块化的组件
  • 让本来就强相关的关注点自然内聚
  • 预编译模板，避免运行时的编译开销
  • 组件作用域的 CSS
  • 在使用组合式 API 时语法更简单
  • 通过交叉分析模板和逻辑代码能进行更多编译时优化
  • 更好的 IDE 支持，提供自动补全和对模板中表达式的类型检查
  • 开箱即用的模块热更新 (HMR) 支持

SFC 是 Vue 框架提供的一个功能，并且在下列场景中都是官方推荐的项目组织方式：

• • 单页面应用 (SPA)
  • 静态站点生成 (SSG)
  • 任何值得引入构建步骤以获得更好的开发体验 (DX) 的项目

  当然，在一些轻量级场景下使用 SFC 会显得有些杀鸡用牛刀。因此 Vue 同样也可以在无构建步骤的情况下以纯 JavaScript 方式使用。如果你的用例只需要给静态 HTML 添加一些简单的交互，你可以看看petite-vue，它是一个 6 kB 左右、预优化过的 Vue 子集，更适合渐进式增强的需求。