【Vue】Single-File Components - HackMD

介紹

單一元件檔 (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 官網收錄在這裡，也可以看我整理的筆記。

為什麼要使用 SFC

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

官方很推薦使用 SFC，特別是在以下情境

Single Page Application (SPA)
Static Site Generation (SSG)
任何需要提升開發體驗的產品

或許在某些情況下真的不需要 SFC，那你可以參考官方推出的 petite-vue，他只有 6kB 大，是設計給漸進式增強開發使用的。

SFC 是如何運作的

會由 @vue/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 章節查看