Vue 專用名詞

名詞解釋

SPA

SPA（Single Page Application，單頁應用）是指應用程式只載入一次 HTML，後續所有頁面變更都由 JavaScript 控制，透過 AJAX 或 API 請求更新畫面，而不需重新載入整個頁面。

• ✅ 前端負責頁面切換：透過 Vue Router 改變 URL，但實際上不會重新載入頁面。
• ✅ 頁面變更速度快：只載入必要資料。
• ✅ 用戶體驗流暢：類似原生應用（如 PWA）。
• ✅ 適合後端 API 架構：如 Laravel 提供 API，Vue 控制前端。
• ❌ SEO 不友善：需搭配 SSR 或 Pre-rendering。
• ❌ 初次載入可能較慢：需載入整個應用程式，JS 檔案較大。

適合場景

• ✔ 互動性高的 Web App：如後台系統、儀表板、社群平台。
• ✔ 長時間使用、需減少頁面重載：如 Gmail、Facebook。

MPA

MPA（Multi Page Application，多頁應用）是指每次頁面切換都會向伺服器請求新的 HTML，瀏覽器重新載入整個頁面。

• ✅ 適合 SEO：每個頁面皆為獨立 HTML，易於搜尋引擎索引。
• ✅ 前端依賴較少：僅需少量 JavaScript（如 jQuery）。
• ✅ 初次載入快：直接由伺服器傳回完整 HTML。
• ❌ 使用者體驗較慢：換頁需重新載入，可能出現閃爍。
• ❌ 後端負擔重：伺服器需回傳完整 HTML，而不只是資料。

適合場景

• ✔ SEO 重要的內容型網站：如部落格、新聞、電商前台。
• ✔ 靜態內容為主的網站：如企業官網、政府機關網站。

SPA vs MPA

SSR

SSR（Server-Side Rendering，伺服器端渲染）是指伺服器在收到請求時，執行 Vue 應用並生成完整 HTML，再傳送給瀏覽器。

• 流程：

  1. 使用者請求頁面（如 /product/1）
  2. 伺服器執行 Vue 應用產生 HTML
  3. 傳送 HTML 給瀏覽器顯示初始內容
  4. 前端 JS 接管頁面進行「Hydration」，變為可互動狀態

• SSR 優點：

  • 🕵️‍♂️ 提升 SEO（爬蟲能看到完整 HTML）
  • 🚀 快速顯示首屏內容（First Paint）

• 工具：Nuxt.js 是 Vue 的 SSR 解決方案之一。

SSG

SSG（Static Site Generation，靜態網站生成）是在建置階段將 Vue 頁面預先轉為靜態 HTML，並直接部署，無需伺服器即時渲染。

• ✔ 🚀 快速加載：HTML 預先生成並可由 CDN 快速傳送

• ✔ 🕵️‍♂️ 良好 SEO：搜尋引擎能讀取完整 HTML

• ✔ 💰 低成本：無需伺服器、部署簡單

• ✔ 🔄 穩定內容最佳：如部落格、文件網站、企業官網

• ❌ 無法即時更新內容：需重新 build 才能反映變動

• ❌ 不適合高動態內容：如社交平台、即時數據網站

• ❌ 大型網站建置時間長：數千頁面重新生成需時

  • 可搭配 ISR（Incremental Static Regeneration）解決此問題

• 工具：Nuxt Content + Nuxt generate 可實現 Vue 的 SSG。

Vue SFC

Vue SFC（Single-File Component，單檔元件）是一種 Vue 元件格式，在 .vue 檔案中同時撰寫 template、script 與 style，實現高模組化與內聚性。

• 優點：
  • 高內聚：HTML、CSS、JavaScript 集中在同一檔案
  • Scoped CSS：避免樣式衝突
  • 支援預處理器：SCSS、TypeScript 等
  • 熱重載支援：搭配 Vite、Webpack 開發效率高

<script>
export default {
    data() {
        return {
            message: "Hello Vue SFC!"
        };
    }
};
</script>

<template>
    <div>
        <h1>{{ message }}</h1>
    </div>
</template>

<style scoped>
h1 {
    color: blue;
}
</style>

==SFC 結構說明==

• <template>：定義 HTML 結構（Vue 3 支援多根元素）
• <script>：撰寫邏輯、定義狀態與方法
• <style>：樣式區塊，可使用 scoped 限定範圍