使用(yòng) Vue 的多種方式

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

獨立腳本 ​

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

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

作(zuò)爲 Web Component 嵌入 ​

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

單頁面應用(yòng) (SPA) ​

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

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

客戶端路由

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

IDE 支持

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

TypeScript 支持

測試工(gōng)具

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

全棧 / SSR ​

純客戶端的 SPA 在首屏加載和(hé) SEO 方面有顯著的問題，因爲浏覽器會(huì)收到(dào)一個巨大(dà)的 HTML 空(kōng)頁面，隻有等到(dào) JavaScript 加載完畢才會(huì)渲染出内容。

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

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

JAMStack / SSG ​

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

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

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

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

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

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