EP58 - 使用Vue的方法

更新於 2024/11/04發佈於 2024/11/04閱讀時間約 6 分鐘

Ways of Using Vue，接下來七篇是官網的Extra Topoics
看完這七篇就會暫停更新摟～
接下來就是實作摟～

我們相信網頁開發沒有「一刀切」的解決方案。因此，Vue 被設計成靈活且可逐步採用的框架。根據您的使用情境，Vue 可以以不同的方式使用，以達到技術棧複雜度、開發者體驗和最終性能之間的最佳平衡。

獨立腳本 - Standalone Script

Vue 可以作為獨立的腳本文件使用，不需要構建步驟！如果您已有後端框架來渲染大部分 HTML，或者您的前端邏輯並不複雜到需要構建步驟，那麼這是將 Vue 集成到您的技術棧中最簡單的方法。在這種情況下，您可以將 Vue 視為更具宣告性替代 jQuery 的工具。

此外，Vue 還提供了一個名為 petite-vue 的替代發行版本，專門針對漸進式增強現有 HTML 進行了優化。它的功能集較少，但非常輕量，並使用了在無構建步驟場景中更高效的實現方式。

嵌入式 Web 組件 - Embedded Web Component

您可以使用 Vue 構建標準的 Web 組件，這些組件可以嵌入到任何 HTML 頁面中，無論它們如何渲染。這個選項允許您以完全與消費者無關的方式利用 Vue：生成的 Web 組件可以嵌入到舊版應用程序、靜態 HTML，甚至是使用其他框架構建的應用程序中。

單頁應用程式 (SPA) - Single-Page Application (SPA)

有些應用程式需要豐富的互動性、深層次的會話深度，以及在前端處理複雜的有狀態邏輯。構建此類應用程式的最佳方法是使用一種架構，讓 Vue 不僅控制整個頁面，還能處理資料更新和導航，而不需要重新載入頁面。這種應用程式通常稱為單頁應用程式 (SPA)。

Vue 提供了核心庫和全面的工具支援，以驚人的開發者體驗來構建現代 SPA，包括：

客戶端路由
極速的構建工具鏈
IDE 支援
瀏覽器開發工具
TypeScript 整合
測試工具

SPA 通常需要後端提供 API 端點，但您也可以將 Vue 與 Inertia.js 這類解決方案搭配使用，既獲得 SPA 的好處，又保留伺服器中心的開發模式。

全端 / 伺服器端渲染 (SSR) - Fullstack / SSR

純客戶端的 SPA 在應用程式對 SEO 和內容展示時間敏感時會出現問題。這是因為瀏覽器接收到的 HTML 頁面大多是空的，必須等到 JavaScript 加載完成後才能渲染內容。

Vue 提供了優質的 API 來將 Vue 應用程式「渲染」成伺服器上的 HTML 字串。這使伺服器能夠返回已經渲染好的 HTML，讓終端用戶在 JavaScript 下載期間能立即看到內容。之後，Vue 會在客戶端「水合」應用程式，使其具有互動性。這稱為伺服器端渲染 (SSR)，它大大改進了如最大內容繪製 (LCP) 等核心網頁性能指標。

基於這種範式之上的更高級的 Vue 框架，如 Nuxt，允許您使用 Vue 和 JavaScript 開發全端應用程式。

JAMStack / 靜態網站生成 (SSG) - JAMStack / SSG

如果所需數據是靜態的，那麼伺服器端渲染可以提前完成。這意味著我們可以將整個應用程式預渲染為 HTML，並作為靜態文件提供服務。這改善了網站性能並簡化了部署，因為我們不再需要在每個請求時動態渲染頁面。Vue 仍然可以為這類應用程式注入豐富的互動性。這種技術通常被稱為靜態網站生成 (SSG)，也被稱為 JAMStack。

SSG 有兩種形式：單頁和多頁。兩種形式都將網站預渲染為靜態 HTML，其區別在於：

在初次加載頁面後，單頁 SSG 將頁面「水合」為 SPA。這需要更多的前端 JS 負載和水合成本，但隨後的導航會更快，因為它只需部分更新頁面內容，而不是重新加載整個頁面。
多頁 SSG 在每次導航時加載一個新頁面。其優點是可以輸送最少的 JS —— 或者如果頁面不需要互動，甚至可以不使用 JS！一些多頁 SSG 框架如 Astro 還支持「部分水合」，這允許你使用 Vue 組件在靜態 HTML 內創建互動「島嶼」。

如果你期望非平凡的互動性、深度會話時間或跨導航的持久化元素 / 狀態，單頁 SSG 更適合。否則，多頁 SSG 是更好的選擇。

Vue 團隊還維護了一個靜態網站生成器 VitePress，目前你正在閱讀的網站就是由 VitePress 驅動的！VitePress 支持兩種形式的 SSG。Nuxt 也支持 SSG。你甚至可以在同一個 Nuxt 應用中為不同路由混合使用 SSR 和 SSG。