使用 Vue 的多種方式

我們相信在 Web 的世界裏沒有一(yī)種方案可(kě)以解決所有問(wèn)題。正因如(rú)此，Vue 被設計成一(yī)個靈活的、可(kě)以漸進式集成的框架。根據使用場景的不同需要(yào)，相應地(dì)有多種不同的方式來使用 Vue，以此在技術(shù)棧複雜(zá)度、開(kāi)發體驗和(hé)性能(néng)表現間(jiān)取得最佳平衡。

獨立腳本 ​

Vue 可(kě)以以一(yī)個單獨 JS 文件的形式使用，無需構建步驟！如(rú)果你的後端框架已經渲染了(le)大部分的 HTML，或者你的前端邏輯并不複雜(zá)，不需要(yào)構建步驟，這(zhè)是最簡單的使用 Vue 的方式。在這(zhè)些場景中你可(kě)以将 Vue 看(kàn)作(zuò)一(yī)個更加聲明(míng)式的 jQuery 替代品。

Vue 也提供了(le)另一(yī)個更适用于此類無構建步驟場景的版本 petite-vue。它為(wèi)漸進式增強已有的 HTML 作(zuò)了(le)特别的優化，功能(néng)更加精簡，十分輕量。

作(zuò)為(wèi) Web Component 嵌入 ​

你可(kě)以用 Vue 來構建标準的 Web Component，這(zhè)些 Web Component 可(kě)以嵌入到任何 HTML 頁面中，無論它們是如(rú)何被渲染的。這(zhè)個方式讓你能(néng)夠在不需要(yào)顧慮最終使用場景的情況下(xià)使用 Vue：因為(wèi)生成的 Web Component 可(kě)以嵌入到舊(jiù)應用、靜态 HTML，甚至用其他(tā)框架構建的應用中。

單頁面應用 (SPA) ​

一(yī)些應用在前端需要(yào)具有豐富的交互性、較深的會話和(hé)複雜(zá)的狀态邏輯。構建這(zhè)類應用的最佳方法是使用這(zhè)樣一(yī)種架構：Vue 不僅控制整個頁面，還負責處理抓取新數(shù)據，并在無需重新加載的前提下(xià)處理頁面切換。這(zhè)種類型的應用通(tōng)常稱為(wèi)單頁應用 (Single-Page application，縮寫為(wèi) SPA)。

Vue 提供了(le)核心功能(néng)庫和(hé)全面的工(gōng)具鏈支持，為(wèi)現代 SPA 提供了(le)極佳的開(kāi)發體驗，覆蓋以下(xià)方面：

客戶端路由

極其快(kuài)速的構建工(gōng)具

IDE 支持

浏覽器開(kāi)發工(gōng)具

TypeScript 支持

測試工(gōng)具

SPA 一(yī)般要(yào)求後端提供 API 數(shù)據接口，但(dàn)你也可(kě)以将 Vue 和(hé)如(rú) Inertia.js 之類的解決方案搭配使用，在保留側重服務端的開(kāi)發模型的同時(shí)獲得 SPA 的益處。

全棧 / SSR ​

純客戶端的 SPA 在首屏加載和(hé) SEO 方面有顯著的問(wèn)題，因為(wèi)浏覽器會收到一(yī)個巨大的 HTML 空頁面，隻有等到 JavaScript 加載完畢才會渲染出內(nèi)容。

Vue 提供了(le)一(yī)系列 API，支持将一(yī)個 Vue 應用在服務端渲染成 HTML 字符串。這(zhè)能(néng)讓服務器直接返回渲染好的 HTML，讓用戶在 JavaScript 下(xià)載完畢前就看(kàn)到頁面內(nèi)容。Vue 之後會在客戶端對應用進行(xíng)“激活 (hydrate)”使其重獲可(kě)交互性。這(zhè)被稱為(wèi)服務端渲染 (SSR)，它能(néng)夠極大地(dì)改善應用在 Web 核心指标上(shàng)的性能(néng)表現，如(rú)最大內(nèi)容繪制 (LCP)。

Vue 生态中有一(yī)些針對此類場景的、基于 Vue 的上(shàng)層框架，比如(rú) NuxtJS，能(néng)讓你用 Vue 和(hé) JavaScript 開(kāi)發一(yī)個全棧應用。

JAMStack / SSG ​

如(rú)果所需的數(shù)據是靜态的，那(nà)麽服務端渲染可(kě)以提前完成。這(zhè)意味着我們可(kě)以将整個應用預渲染為(wèi) HTML，并将其作(zuò)為(wèi)靜态文件部署。這(zhè)增強了(le)站點的性能(néng)表現，也使部署變得更容易，因為(wèi)我們無需根據請(qǐng)求動态地(dì)渲染頁面。Vue 仍可(kě)通(tōng)過激活在客戶端提供交互。這(zhè)一(yī)技術(shù)通(tōng)常被稱為(wèi)靜态站點生成 (SSG)，也被稱為(wèi) JAMStack。

SSG 有兩種風(fēng)格：單頁和(hé)多頁。這(zhè)兩種風(fēng)格都(dōu)能(néng)将站點預渲染為(wèi)靜态 HTML，區(qū)别在于：

單頁 SSG 在初始頁面加載後将其“激活”為(wèi) SPA。這(zhè)需要(yào)更多的前期 JS 加載和(hé)激活成本，但(dàn)後續的導航将更快(kuài)，因為(wèi)它隻需要(yào)部分地(dì)更新頁面內(nèi)容，而無需重新加載整個頁面。

多頁 SSG 每次導航都(dōu)會加載一(yī)個新頁面。好處是它可(kě)以僅需最少(shǎo)的 JS——或者如(rú)果頁面無需交互則根本不需要(yào) JS！一(yī)些多頁面 SSG 框架，如(rú) Astro 也支持“部分激活”——它允許你通(tōng)過 Vue 組件在靜态 HTML 中創建交互式的“孤島”。

單頁 SSG 更适合于重交互、深會話的場景，或需要(yào)在導航之間(jiān)持久化元素或狀态。否則，多頁 SSG 将是更好的選擇。

Vue 團隊也維護了(le)一(yī)個名為(wèi) VitePress 的靜态站點生成器，你正在閱讀的文檔就是基于它構建的！VitePress 支持兩種形式的 SSG。另外(wài)，NuxtJS 也支持 SSG。你甚至可(kě)以在同一(yī)個 Nuxt 應用中通(tōng)過不同的路由提供 SSR 和(hé) SSG。