Vue 是一個建立在 HTML、CSS 及 JavaScript 上，用來建立使用者介面的前端框架。它的設計理念強調「漸進式」與「可組合性」，讓開發者能根據專案規模與需求，逐步擴充功能。
與 React 相比，Vue 採用基於標準 HTML 延伸的模板語法，在結構與表達方式上較貼近傳統前端開發習慣。對於剛接觸前端框架的人而言，個人認為這種設計是較容易理解與上手的。
這篇文章將主要從官方文件這篇介紹的翻譯與改寫著手，並穿插一些與 React 比較後，個人小小的、可能有億點點主觀的感想。
Vue 的核心特色：
一、宣告式渲染 (Declarative Rendering)
Vue 延伸標準 HTML 的 <template> 語法，讓我們能夠根據 JavaScript 的狀態，描述畫面應該呈現的結果。
與原生 JS 告訴瀏覽器「如何操作 DOM」的做法不同，我們描述的是：
當資料的狀態是什麼時，畫面應該長怎麼樣子。
二、響應式系統 (Reactivity)
Vue 內建能夠響應資料變化的系統，會追蹤資料的狀態，當狀態變化時，自動觸發對應的畫面更新。
這意味著我們不需要手動查找 DOM 元素跟同步狀態，只需要專注於資料本身的變化。Vue 會負責將變化反應到畫面上。
💡 如果學過 React，應該會對這兩個特色不陌生。
兩個框架都以「資料驅動畫面」作為核心設計理念，不過實作方式略有不同：
React 使用 JSX，將 UI 作為 JavaScript 表達式的一部分；
Vue 則透過 template 語法，將結構與邏輯分開描述。
漸進式框架 (Progressive Framework)
因應前端網頁多元的需求與規模，可以根據專案需求與規模，逐步引入不同層級的功能。
這點其實跟 React 也蠻相似。不過差別在於， React 核心專注 UI 渲染，其他功能多仰賴社群生態系組合；而 Vue 官方則提供一套整合過的解決方案，比如說，
- 路由系統：可用官方的 Vue Router
- 狀態管理工具：由於經過官方推薦，Pinia 通常是首選
這種官方整合方式，能夠減少在學習與選型成本，對於規模會逐漸擴大的專案，也更容易維持一致性。
單一檔案元件 (Single File Component, SFC)
Vue 提供一種特殊的元件格式，名為「單一檔案元件」(SFC)，副檔名為 .vue。這是一種類似 HTML 風格的檔案，同時封裝了結構、邏輯與樣式：
- JavaScript：寫於
<script>標籤中 - HTML：寫於
<template>標籤中 - CSS：寫於
<style>標籤中
<script>
// JavaScript
</script>
<template>
<!-- HTML -->
</template>
<style scoped>
/* CSS（僅作用於此元件） */
</style>
其中 scoped 代表樣式僅作用於該元件。Vue 會在編譯階段自動為元素加入對應的屬性，實現樣式隔離，避免不同元件之間互相污染。
兩種 API 風格
Vue 提供兩種主要撰寫元件邏輯的方式：Options API 與 Composition API。
一、Options API
透過物件不同屬性來定義元件邏輯，例如 data、methods、mounted 等。
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
}
},
mounted() {
console.log(`The initial count is ${this.count}.`)
}
}
</script>
這種寫法以「元件實例（component instance）」為核心，透過 this 存取資料與方法，心智模型接近物件導向或類別的概念。
優點是結構清楚、上手容易；缺點則是在元件邏輯變得複雜時，相關邏輯可能分散在不同選項中，不利於重構與抽離。
二、Composition API
Composition API 則改以函式為核心，透過從 Vue 匯入的 API 來定義響應式資料與生命週期。定義時，會在 <script> 標籤上放上 setup 屬性。
<script setup>
import { ref, onMounted } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
onMounted(() => {
console.log(`The initial count is ${count.value}.`)
})
</script>
此 API 不再依賴 this，專注於宣告讓畫面響應的資料狀態，並將相關邏輯抽離成可重用的函式。
小結
- Vue 的核心特色：以宣告式方式描述 UI；以響應式系統更新畫面
- 提供漸進式的架構設計
- 單一元件檔案的設計
- 提供兩種特色的 API 寫法：Options API、Composition API
- Options API 偏向物件導向
- Composition API 以狀態為核心組織邏輯
由於 Composition API 的概念更接近 React 的思維模式，此系列的後續文章將以此寫法為主。
參考資料
Vue 入門系列文章
- [ Vue 入門 ] 01：宣告式渲染、響應式系統與 SFC
- [ Vue 入門 ] 02 - 從原生 HTML 到 CDN 應用，打造 Vue 動態介面
