🟢 Vue.js 入門：什麼是前端框架？

📌 重要觀念：框架不是 JavaScript 原生語法！

在開始學習 Vue 之前，最重要的一件事：

Vue.js、React、Angular 這些「前端框架」都不是 JavaScript 的原生語法。它們是建立在 JavaScript 之上的工具庫／框架，底層全部都是用 JavaScript 寫成的。當你寫 ref()、computed() 時，這些不是瀏覽器認識的語法——是 Vue 團隊用 JS 封裝出來的函式。

📌 什麼是前端框架？為什麼需要框架？

想像你要蓋一棟房子：

原生 JavaScript (Vanilla JS) = 你自己一磚一瓦慢慢蓋
前端框架 = 你用預製的模組化建材，快速搭建

沒有框架時的痛點

用原生 JS 寫一個簡單的待辦清單：

<!-- 原生 JS 版本：手動操作 DOM -->
<div id="app">
  <input id="todoInput" type="text" />
  <button onclick="addTodo()">新增</button>
  <ul id="todoList"></ul>
</div>

<script>
  // 原生 JS：你必須自己管理 DOM
  let todos = [];

  function addTodo() {
    const input = document.getElementById('todoInput');
    const text = input.value.trim();
    if (!text) return;

    todos.push(text);
    input.value = '';

    // 痛點：每次資料變化，你都要手動更新畫面
    renderTodos();
  }

  function renderTodos() {
    const list = document.getElementById('todoList');
    // 每次都要清空再重建整個列表
    list.innerHTML = '';
    todos.forEach((todo, index) => {
      const li = document.createElement('li');
      li.textContent = todo;
      const btn = document.createElement('button');
      btn.textContent = '刪除';
      btn.onclick = () => {
        todos.splice(index, 1);
        renderTodos(); // 又要重新渲染...
      };
      li.appendChild(btn);
      list.appendChild(li);
    });
  }
</script>

用 Vue 框架的同等功能

<!-- Vue 版本：宣告式、自動響應 -->
<template>
  <div>
    <input v-model="newTodo" @keyup.enter="addTodo" />
    <button @click="addTodo">新增</button>
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <button @click="todos.splice(index, 1)">刪除</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// Vue 的 ref() 不是 JS 原生語法！
// 它是 Vue 提供的「響應式包裝函式」
const newTodo = ref('')
const todos = ref([])

function addTodo() {
  if (!newTodo.value.trim()) return
  todos.value.push(newTodo.value.trim())
  newTodo.value = ''
  // 不需要手動更新 DOM！Vue 自動追蹤變化
}
</script>

差異一目瞭然： | 比較項目 | 原生 JS | Vue 框架 | |---------|---------|---------| | DOM 操作 | 手動 getElementById、createElement | 自動響應式更新 | | 資料綁定 | 自己寫 render 函式 | v-model 雙向綁定 | | 事件處理 | onclick 字串 | @click 指令 | | 程式碼量 | 多、容易出錯 | 少、宣告式 | | 可維護性 | 難以擴展 | 元件化、易擴展 |

📌 三大前端框架比較：Vue vs React vs Angular

再次強調：這三個框架底層都是 JavaScript！

JavaScript（語言本身）
  ├── Vue.js   → 漸進式框架，學習曲線平緩
  ├── React    → UI 函式庫，生態系豐富
  └── Angular  → 完整框架，企業級功能齊全

特點	Vue 3	React 18	Angular 17
定位	漸進式框架	UI 函式庫	完整框架
語法	SFC (`.vue` 檔)	JSX	TypeScript + 裝飾器
學習曲線	⭐ 平緩	⭐⭐ 中等	⭐⭐⭐ 陡峭
狀態管理	Pinia	Redux / Zustand	RxJS / NgRx
適合場景	中小型到大型	各種規模	大型企業應用

📌 Vue 的設計哲學：漸進式框架

Vue 最大的特色是「漸進式」(Progressive)：

Level 1: 只用 Vue 核心 → 響應式 + 元件
Level 2: 加上 Vue Router → 單頁應用 (SPA)
Level 3: 加上 Pinia → 狀態管理
Level 4: 加上 Vite + TypeScript → 完整工程化
Level 5: 加上 Nuxt → 伺服端渲染 (SSR)

你可以只在一個小區塊使用 Vue，也可以用它建構整個大型應用。不像 Angular 要求「全家桶」，Vue 讓你按需引入。

用 CDN 快速體驗 Vue（無需建置工具）

<!DOCTYPE html>
<html>
<head>
  <!-- 直接引入 Vue，不需要 npm 或 Vite -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="count++">點了 {{ count }} 次</button>
  </div>

  <script>
    // 這裡的 createApp、ref 都是 Vue 提供的函式
    // 不是 JavaScript 原生就有的！
    const { createApp, ref } = Vue

    createApp({
      setup() {
        const message = ref('Hello Vue！')
        const count = ref(0)
        return { message, count }
      }
    }).mount('#app')
  </script>
</body>
</html>

💡 常見誤區

❌ 「Vue 是一種程式語言」→ Vue 是一個 JavaScript 框架
❌ 「學了 Vue 就不用學 JS」→ 你必須先掌握 JS 基礎
❌ 「ref() 是 JS 的函式」→ ref() 是 Vue 提供的響應式 API
❌ 「.vue 檔案瀏覽器看得懂」→ 需要經過 Vite/Webpack 編譯
✅ 「Vue 幫你封裝了複雜的 DOM 操作和狀態管理」

🧭 學習路線建議

1. 先學好 JavaScript 基礎（變數、函式、陣列、物件、Promise）
2. 了解 DOM 操作基本概念
3. 學習 Vue 3 基礎語法（下一章）
4. 學習元件化開發
5. 學習路由和狀態管理
6. 實作完整專案