Vue 3 實戰：從零到一掌握 Component 元件封裝與核心觀念
在現代前端開發中，元件（Component） 是構建應用程式的基石。簡單來說，元件就是一個 可複用、獨立且封裝 的 UI 單元。
Vue 透過 SFC（Single File Component，單檔案元件） 規範，將 HTML 模板、JavaScript 邏輯與 CSS 樣式整合在 .vue 檔案中。元件之間透過 props 接收外部資料、利用 emits 向外發送事件，並透過 slots 插入自定義內容，實現高度靈活的介面設計。
最基本的 Vue 3 元件結構（SFC）
在 Vue 3 中，我們最推薦使用 <script setup> 語法糖，這能讓程式碼更簡潔且具備更好的效能。
<script setup>
import { ref } from "vue";
const title = "我是元件";
const count = ref(0);
</script>
<template>
<div class="card">
<h2>{{ title }}</h2>
<button @click="count++">點我 {{ count }}</button>
</div>
</template>
<style scoped>
.card {
border: 1px solid #ccc;
}
</style>區塊說明
<script setup>: 定義 響應式資料、方法與邏輯。它是 Composition API 的入口。<template>: 以 模板語法 定義 HTML 結構，Vue 會自動追蹤此處使用的變數並在資料改變時更新畫面。<style scoped>: 定義 CSS 樣式。加入scoped屬性能確保樣式局部化，不會污染到外部或其他元件的樣式。
元件化開發的三大核心特性
可複用性 (Reusability)
寫好一個 按鈕 或 卡片 元件後，您可以在分頁 A、分頁 B 重複使用它。當您需要改掉按鈕的圓角時，只需要修改這個元件檔，全站都會同步更新。
封裝性 (Encapsulation)
每個元件內部都有獨立的狀態（State）。除非您刻意傳遞，否則元件 A 的變數不會影響到元件 B。這就像每台電腦都有自己的 CPU 和記憶體，互不干擾。
階層樹狀結構 (Component Tree)
Vue 應用程式是由一個 根元件 (Root) 開始，向下延伸出無數的子元件，形成像樹一樣的結構。
元件的生命週期 (Lifecycle)
每個元件從出生到死亡都會經歷特定的階段。Vue 提供了 生命週期 鉤子（Hooks），讓您可以在特定時間點執行程式：
- onMounted: 元件剛被放入網頁時（適合呼叫 API 取資料）。
- onUpdated: 資料改變，畫面重新渲染時。
- onUnmounted: 元件被移除時（適合清除計時器或監聽器）。
TIP
簡單來說，元件化就是將複雜的問題拆解成多個簡單的小單元。當您學會如何設計良好的元件介面，就掌握了 Vue 開發的精髓。
元件之間怎麼傳遞資料？
元件拆得越細，彼此溝通就越重要。Vue 依照關係的遠近提供了不同的管道：
| 情境 | 機制 |
|---|---|
| 父層把資料交給子層 | props |
| 子層通知父層 | emit |
| 父子雙向同步 | defineModel |
| 沒宣告的屬性與事件 | 透傳屬性 attrs |
| 跨越多層、避免逐層轉交 | provide / inject |
| 把畫面片段交給元件內部渲染 | 插槽 slots |
常見問題
什麼是單檔案元件（SFC）？
SFC 是副檔名為 .vue 的檔案，把一個元件的 template、script 與 style 寫在同一個檔案裡。它需要 Vite 這類建置工具 編譯，是 Vue 專案的標準開發方式。
script setup 與一般 script 有什麼差別？
<script setup> 是編譯期語法糖，頂層宣告的變數與函式會自動暴露給模板，不必手動 return，程式碼更精簡，效能也略優。它是 Vue 3 目前推薦的寫法。
style scoped 是怎麼做到樣式不外洩的？
編譯時 Vue 會為該元件的元素加上唯一的屬性標記，並把選擇器改寫成帶有該屬性的形式，因此樣式只會作用在這個元件的元素上。
元件之間要怎麼傳遞資料？
父傳子用 props、子通知父用 emit、需要雙向同步用 defineModel、未宣告的屬性由 attrs 透傳，跨越多層則用 provide 與 inject。
元件檔名該怎麼命名？
官方風格指南建議使用 PascalCase，例如：ProductCard.vue，並且用多個單字組成，避免與原生 HTML 標籤衝突。
一個元件應該拆到多細？
以 是否會被重複使用 與 單一職責 為準。同一段畫面在兩個地方以上出現，或某個區塊有自己獨立的狀態與邏輯時，就值得拆成元件。
