主流前端框架
2025年4月9日大约 5 分鐘
學習目標
- 初步認識三大主流前端框架：React, Vue, Angular。
- 了解各框架的核心思想與主要特點。
- 比較 React, Vue, Angular 之間的異同之處。
- 為後續深入學習特定框架打下基礎。
核心概念：三大框架簡介
現代前端開發為了應對日益複雜的應用需求，催生了許多優秀的 JavaScript 框架。其中，React, Vue, 和 Angular 是目前最受歡迎的三個框架。它們都能幫助開發者更有效率地建構互動式、可維護的使用者介面，但各有其設計哲學和特點。
1. React：靈活的 UI 函式庫
- 開發者： Facebook (Meta)
- 核心思想： 使用 組件 (Components) 來建構 UI。React 本身更像是一個函式庫 (Library)，專注於 UI 層，常需要搭配其他函式庫 (如 React Router 進行路由管理、Redux 或 Zustand 進行狀態管理) 來建構完整應用。
- 主要特點：
- 組件化： 將 UI 拆分成獨立、可重複使用的組件。
- 虛擬 DOM (Virtual DOM)： 透過在記憶體中操作虛擬 DOM，最小化實際 DOM 操作，提升效能。
- JSX： 一種 JavaScript 的語法擴展，允許在 JavaScript 程式碼中撰寫類似 HTML 的結構，使得組件的結構和邏輯更緊密。
- 單向數據流： 數據流動方向清晰，易於追蹤和除錯。
- 生態系龐大： 擁有豐富的社群資源和第三方函式庫。
範例 (簡單的 React 組件)：
import React, { useState } from 'react';
function Counter() {
// 使用 useState Hook 來管理狀態
const [count, setCount] = useState(0);
return (
<div>
<p>你點擊了 {count} 次</p>
{/* 點擊按鈕時更新狀態 */}
<button onClick={() => setCount(count + 1)}>
點我增加
</button>
</div>
);
}
export default Counter;2. Vue：漸進式框架
- 開發者： Evan You (個人開發者，後發展為團隊)
- 核心思想： 漸進式 (Progressive)，易於上手，可以像函式庫一樣整合到現有專案中，也可以用於建構複雜的單頁應用 (SPA)。提供了較為完整的解決方案，但仍保有一定的靈活性。
- 主要特點：
- 組件化： 同樣基於組件化開發。
- 模板語法： 使用基於 HTML 的模板語法，將 DOM 與底層數據綁定，語法直觀易懂。
- 響應式系統： 自動追蹤數據變化並更新相關的 DOM。
- 單文件組件 (Single-File Components, SFC)： 將模板 (
<template>)、邏輯 (<script>) 和樣式 (<style>) 封裝在同一個.vue檔案中，結構清晰。 - 官方支援： 核心團隊維護了路由 (
vue-router)、狀態管理 (pinia,vuex) 等重要配套函式庫。
範例 (簡單的 Vue 單文件組件)：
<script setup>
import { ref } from 'vue'
// 使用 ref 創建響應式狀態
const count = ref(0)
function increment() {
count.value++
}
</script>
<template>
<div>
<p>你點擊了 {{ count }} 次</p>
<!-- @click 是 v-on:click 的縮寫 -->
<button @click="increment">
點我增加
</button>
</div>
</template>
<style scoped>
/* scoped 樣式只作用於當前組件 */
button {
color: blue;
}
</style>3. Angular：全功能的平台
- 開發者： Google
- 核心思想： 提供一個完整、全面的平台 (Platform)，用於建構大型、企業級的應用程式。它不僅僅是 UI 函式庫，而是一個包含路由、狀態管理、HTTP 客戶端、測試工具等的完整框架。
- 主要特點：
- 組件化： 也是基於組件的架構。
- TypeScript： 預設使用 TypeScript 開發，提供靜態類型檢查，有助於大型專案的維護。
- 依賴注入 (Dependency Injection, DI)： 內建強大的 DI 系統，方便管理組件和服務之間的依賴關係。
- 全面的解決方案： 框架內建了許多開發所需的功能，減少了選擇第三方函式庫的困擾。
- 架構規範性強： 提供了一套明確的開發模式和架構，適合團隊協作。
- 學習曲線較陡峭： 相較於 React 和 Vue，概念和內建功能較多。
範例 (簡單的 Angular 組件 - TypeScript)：
import { Component } from '@angular/core';
@Component({
selector: 'app-counter', // 組件的 HTML 標籤名
template: `
<div>
<p>你點擊了 {{ count }} 次</p>
<button (click)="increment()">點我增加</button>
</div>
`
})
export class CounterComponent {
count = 0; // 組件的狀態 (屬性)
increment() { // 組件的方法
this.count++;
}
}框架比較
| 特點 | React | Vue | Angular |
|---|---|---|---|
| 類型 | UI 函式庫 (Library) | 漸進式框架 (Progressive Framework) | 全功能平台 (Platform/Framework) |
| 開發者 | Facebook (Meta) | Evan You & Community | |
| 核心焦點 | UI 層、組件化、虛擬 DOM | 易用性、漸進整合、響應式數據綁定 | 大型應用、完整解決方案、TypeScript |
| 主要語言 | JavaScript (JSX) | JavaScript / TypeScript (模板語法) | TypeScript |
| 狀態管理 | 第三方 (Redux, Zustand, Context API) | 官方 (Pinia, Vuex) / 第三方 | 內建 (RxJS, Services) / 第三方 (NgRx) |
| 路由管理 | 第三方 (React Router) | 官方 (vue-router) | 官方 (@angular/router) |
| 學習曲線 | 中等 | 較低 | 較高 |
| 靈活性 | 高 | 中高 | 中 |
| 架構規範 | 較弱 (依賴社群最佳實踐) | 中等 (官方提供指引) | 強 (框架內建規範) |
| 適用場景 | 各種規模應用、需要高度靈活性 | 中小型應用、快速開發、易於上手 | 大型企業級應用、需要強規範和完整工具鏈 |
總結：
- React: 靈活、生態龐大，適合需要自訂技術棧或追求最新技術的團隊。
- Vue: 易學易用、文檔友好，適合初學者、中小型專案或希望快速開發的場景。
- Angular: 功能全面、架構規範，適合大型、複雜、需要長期維護的企業級應用。
選擇哪個框架取決於專案需求、團隊熟悉度、以及對靈活性 vs. 規範性的偏好。