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 開發的精髓。