[ Vue 入門 ] 01：宣告式渲染、響應式系統與 SFC

zxlee

發佈於Vue

2026/02/13 更新2026/02/11 發佈閱讀 7 分鐘

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>