## 介紹
單一元件檔 (Single-File Components, 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 利用 script、template、style 將文件切成三個部分 (js、html、css)，更完整的語法 Vue 官網收錄在[這裡](https://vuejs.org/api/sfc-spec.html)，也可以看我整理的[筆記](https://hackmd.io/@int/VueSFCsyntax)。

## 為什麼要使用 SFC

1. 可以使用熟悉的js、html、css語法來編輯
2. 將本來就高度相關的程式碼放在一起
3. 預先編譯的 template，降低執行時的成本(參考[生命週期](https://hackmd.io/@int/VueLifeHook))
4. 只作用在元件內的 css (scoped css)
5. 用比較簡單的方法使用 composition api
6. 透過交叉分析 template 和 script 能夠進行更多優化
7. IDE 支援更好，提供語法自動補齊與表達式的類型檢查
8. 支援熱更新 (Hot-Module Replacement, HMR)，並且可以馬上使用不用額外設定

官方很推薦使用 SFC，特別是在以下情境
1. Single Page Application (SPA)
2. Static Site Generation (SSG)
3. 任何需要提升開發體驗的產品

或許在某些情況下真的不需要 SFC，那你可以參考官方推出的 [petite-vue](https://github.com/vuejs/petite-vue)，他只有 6kB 大，是設計給[漸進式增強開發](https://zh.wikipedia.org/zh-tw/%E6%B8%90%E8%BF%9B%E5%A2%9E%E5%BC%BA)使用的。

## SFC 是如何運作的
會由 [@vue/compiler-sfc](https://github.com/vuejs/core/tree/main/packages/compiler-sfc)進行編譯成網頁看的懂得 js 與 css。編譯過的 SFC 就是標準的 ES module，所以使用時就要用到 import 。

import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}

`style` tag 編譯之後他們就會被插到 html 上，所以運作方式就和 html 屬性中的 `style` 一樣。

在實戰中一般都會用 Vite 或是 Vue CLI 來建構 Vue 專案，所以 Vue 也有提供官方的文件幫助你快速上手 SFC，更多可以在 [Tooling](https://vuejs.org/guide/scaling-up/tooling.html) 章節查看