Vue.js 教學 - 漸進式 JavaScript 框架

Vue.js: The Progressive JavaScript Framework

Vue.js（讀音 /vjuː/，類似 view）是由尤雨溪（Evan You）在 2014 年創建的開源 JavaScript 框架，專門用來建構使用者介面 (UI, User Interfaces)。Vue 的設計理念是「漸進式框架」（Progressive Framework），意思是你可以根據需求，從簡單的互動功能開始，逐步擴展到完整的單頁應用程式（SPA）。

Vue.js 目前是最受歡迎的前端框架之一，與 React 和 Angular 並列為前端三大框架。Vue 以其簡潔的 API、優秀的文件和平緩的學習曲線而聞名。

Vue.js 核心特色

1. 漸進式框架（Progressive Framework）

   Vue 的核心只關注視圖層（View），你可以將 Vue 輕鬆地整合到現有專案中，只用於部分頁面；也可以搭配生態系統中的工具（如 Vue Router、Pinia）來建構完整的大型應用程式。

2. 聲明式渲染（Declarative Rendering）

   Vue 使用基於 HTML 的模板語法，讓你可以聲明式地描述 UI 應該長什麼樣子。當資料改變時，Vue 會自動更新相對應的 DOM。

   <template>
     <h1>{{ message }}</h1>
   </template>
   

3. 響應式系統（Reactivity System）

   Vue 的響應式系統會自動追蹤資料的依賴關係，當資料變化時，只有真正需要更新的部分會被重新渲染，無需手動操作 DOM。

4. 元件化開發（Component-Based）

   Vue 應用程式由一個個可重複使用的元件組成。每個元件封裝了自己的模板、邏輯和樣式，可以像積木一樣組合成複雜的介面。

5. 單文件元件（Single-File Components, SFC）

   Vue 提供獨特的 .vue 檔案格式，讓你可以在一個檔案中編寫元件的模板、JavaScript 和 CSS，同時保持關注點分離。

   <script setup>
   import { ref } from 'vue'
   const count = ref(0)
   </script>
   
   <template>
     <button @click="count++">Count is: {{ count }}</button>
   </template>
   
   <style scoped>
   button { font-weight: bold; }
   </style>
   

Vue.js 的優點與缺點

優點：

• 學習曲線平緩，對初學者友善
• 優秀的官方文件，並有完整的中文翻譯
• 模板語法直覺，接近原生 HTML
• 檔案小、效能好
• 單文件元件讓程式碼組織更清晰
• Composition API 提供更好的邏輯重用和 TypeScript 支援
• 活躍的社群和豐富的生態系統
• 可以漸進式採用，從小功能開始

缺點與限制：

• 相比 React，企業級大型專案的案例較少
• 生態系統雖然豐富，但選擇較 React 少
• 過度靈活可能導致程式碼風格不一致（Options API vs Composition API）
• SEO 需要額外配置（可使用 Nuxt.js 解決）

Vue 3 vs Vue 2

本教學以 Vue 3 為主。Vue 3 是 2020 年發布的主要版本，帶來許多重要改進：

Vue.js 學習路徑

如果你是 Vue 初學者，建議按照以下順序學習：

1. 快速入門

環境建置 → 模板語法 → 指令 → 元件基礎

2. 資料傳遞與狀態

Props → 事件處理 → ref 與 reactive → Computed → Watch

3. 渲染技巧

條件渲染 → 列表渲染 → Slots 插槽

4. 進階元件

生命週期 → Provide/Inject → Template Refs → 動態元件

5. Composition API 深入

Composition API → Composables → v-model 綁定

6. 實戰進階

表單處理 → Transition 動畫 → Vue Router → Pinia 狀態管理 → TypeScript

Vue.js 與 React 的比較

如果你已經學過 React，以下是一些主要差異：

兩者都是優秀的框架，選擇哪個取決於團隊偏好和專案需求。

開始學習

準備好了嗎？讓我們從環境建置開始，建立你的第一個 Vue 應用程式！