vue的单文件组件(SFC)

Vue 的单文件组件 (即 *.vue 文件，英文 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>

为什么要使用 SFC

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