React, Vue 框架比較

2026-03-172026-03-17

下面分別用 React 與 Vue 寫一個簡單的數字加減功能，讓你直接感受寫法上的差異。

React 的寫法

React 使用稱為 JSX 的語法，這讓你可以在 JavaScript 程式碼中直接寫 HTML 標籤。它強調資料流的單向控制，修改資料必須透過特定的函式。

JavaScript

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>目前數字：{count}</p>
      <button onClick={() => setCount(count + 1)}>加 1</button>
    </div>
  );
}

在 React 中，你必須手動呼叫 setCount 來告訴程式資料改變了，頁面才會更新。這種方式雖然寫起來稍微繁瑣，但對於追蹤程式邏輯非常有幫助，讓你知道資料是在什麼時候被改動的。

Vue 的寫法

Vue 的寫法將 HTML、JavaScript 與樣式分開處理，對初學者來說非常直觀。它採用響應式系統，你只需要直接改動變數的值，頁面就會自動更新。

HTML

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

<template>
  <div>
    <p>目前數字：{{ count }}</p>
    <button @click="count++">加 1</button>
  </div>
</template>

Vue 的 template 區塊看起來就像一般的網頁 HTML，這讓設計師或習慣傳統網頁開發的人能快速上手。你可以看到在按鈕點擊時，只需要簡單寫 count++ 就能完成更新，開發效率非常高。

Node.js 的角色

在這個範例中，Node.js 雖然沒有出現在程式碼畫面裡，但它是這兩個框架背後的推手。不論是 React 還是 Vue，你都需要在電腦安裝 Node.js 才能執行開發伺服器，並把這些程式碼轉換成瀏覽器看得懂的內容。

你想試著在你的電腦上安裝 Node.js 並跑跑看這些程式碼嗎？

定位與本質的區別

首先必須釐清 Node.js 與另外兩者的根本不同。Node.js 是一個執行環境，它讓 JavaScript 這種程式語言可以脫離瀏覽器，在電腦或伺服器上直接執行。如果把開發網頁比喻成蓋房子，Node.js 就像是水電系統與地基等看不見的後端架構。React 與 Vue 則屬於前端框架或函式庫，專門用來處理使用者看得到的介面，像是房子的裝潢、家具與互動開關。通常開發者會利用 Node.js 提供的工具來安裝與管理 React 或 Vue 的專案。

React 與 Vue 的開發特色

React 是由 Meta 維護的函式庫，核心思想是把網頁拆解成一個個細小的組件。它強調透過 JavaScript 來處理一切邏輯，開發自由度非常高，但學習者需要具備較強的 JavaScript 基礎，且在開發大型專案時，需要自行挑選與組合各種第三方工具。Vue 則被稱為漸進式框架，開發體驗比較貼近傳統的 HTML 寫法。Vue 的設計非常貼心，官方直接提供路由與狀態管理等工具，讓開發者不用在眾多選項中糾結。對於剛接觸前端框架的人來說，Vue 的語法通常比較直觀且容易上手。

選擇建議與市場趨勢

在選擇這三者時，Node.js 是現代網頁開發者的必備基礎，因為它是運行開發工具的引擎。至於前端的選擇，如果目標是進入大型跨國企業或追求最豐富的社群資源，React 是目前的市場主流，職缺數量也相對較多。如果你希望快速開發原型專案，或是團隊成員偏好簡單明瞭的結構，Vue 會是更有效率的選擇。在實際工作中，這三者並非競爭關係，多數情況下會是使用 Node.js 環境來同時開發 React 或 Vue 的前端介面。

Max的程式語言筆記