Nuxt 生命週期
本章的目標是提供一個關於框架不同部分、它們的執行順序以及它們如何協同工作的高階概述。
伺服器
在伺服器端，對於你的應用程式的每個初始請求，會執行以下步驟：
步驟 1：設定 Nitro 伺服器和 Nitro 外掛（一次）
Nuxt 由Nitro一個現代伺服器引擎提供支援。
當 Nitro 啟動時，它會初始化並執行 /server/plugins 目錄下的外掛。這些外掛可以：
- 捕獲和處理應用程式範圍的錯誤。
- 註冊在 Nitro 關閉時執行的鉤子。
- 註冊用於請求生命週期事件的鉤子，例如修改響應。
步驟 2：Nitro 伺服器中介軟體
初始化 Nitro 伺服器後，server/middleware/ 下的中介軟體會在每個請求中執行。中介軟體可用於身份驗證、日誌記錄或請求轉換等任務。
步驟 3：初始化 Nuxt 並執行 Nuxt App 外掛
首先建立 Vue 和 Nuxt 例項。之後，Nuxt 執行其伺服器外掛。這包括：
- 內建外掛，例如 Vue Router 和
unhead。 app/plugins/目錄中的自定義外掛，包括沒有後綴的（例如myPlugin.ts）和帶有.server字尾的（例如myServerPlugin.server.ts）。
外掛以特定順序執行，並且可能相互依賴。有關更多詳細資訊，包括執行順序和並行性，請參閱外掛文件。
app:created 鉤子，可用於執行額外邏輯。步驟 4：路由驗證
在初始化外掛和執行中介軟體之前，如果 definePageMeta 函式中定義了 validate 方法，Nuxt 會呼叫該方法。validate 方法可以是同步或非同步的，通常用於驗證動態路由引數。
- 如果引數有效，
validate函式應返回true。 - 如果驗證失敗，它應該返回
false或包含statusCode和/或statusMessage的物件以終止請求。
有關更多資訊，請參閱路由驗證文件。
步驟 5：執行 Nuxt App 中介軟體
中介軟體允許你在導航到特定路由之前執行程式碼。它通常用於身份驗證、重定向或日誌記錄等任務。
在 Nuxt 中，有三種類型的中介軟體：
- 全域性路由中介軟體
- 命名路由中介軟體
- 匿名（或內聯）路由中介軟體
Nuxt 在初始頁面載入時（在伺服器和客戶端上）執行所有全域性中介軟體，然後在任何客戶端導航之前再次執行。命名和匿名中介軟體僅在相應頁面元件中定義的頁面（路由）元資料的 middleware 屬性中指定的路由上執行。
有關每種型別和示例的詳細資訊，請參閱中介軟體文件。
伺服器上的任何重定向都將導致向瀏覽器傳送 Location: 頭；然後瀏覽器會向此新位置發出新的請求。除非持久化到 cookie 中，否則所有應用程式狀態都將在此時重置。
步驟 6：渲染頁面和元件
在此步驟中，Nuxt 渲染頁面及其元件，並使用 useFetch 和 useAsyncData 獲取任何所需資料。由於在伺服器上沒有動態更新和 DOM 操作，Vue 生命週期鉤子如 onBeforeMount、onMounted 以及後續鉤子在 SSR 期間**不會**執行。
預設情況下，Vue 在 SSR 期間暫停依賴跟蹤以獲得更好的效能。
<script setup> 的根作用域中生成需要清理的副作用程式碼。這種副作用的一個例子是使用 setInterval 設定計時器。在僅限客戶端的程式碼中，我們可能會設定一個計時器，然後在 onBeforeUnmount 或 onUnmounted 中將其清除。然而，由於解除安裝鉤子在 SSR 期間永遠不會被呼叫，計時器將永遠存在。為了避免這種情況，請將副作用程式碼移到 onMounted 中。步驟 7：生成 HTML 輸出
獲取所有所需資料並渲染元件後，Nuxt 將渲染的元件與 unhead 中的設定結合起來，生成一個完整的 HTML 文件。然後，此 HTML 以及相關資料會發送回客戶端以完成 SSR 過程。
app:rendered 鉤子。render:html 鉤子。此鉤子允許你操作生成的 HTML，例如注入額外的指令碼或修改元標籤。客戶端（瀏覽器）
生命週期的這一部分完全在瀏覽器中執行，無論你選擇哪種 Nuxt 模式。
步驟 1：初始化 Nuxt 並執行 Nuxt App 外掛
此步驟與伺服器端執行類似，包括內建外掛和自定義外掛。
app/plugins/ 目錄中的自定義外掛，例如沒有後綴的（例如 myPlugin.ts）和帶有 .client 字尾的（例如 myClientPlugin.client.ts），在客戶端執行。
app:created 鉤子，可用於執行額外邏輯。步驟 2：路由驗證
此步驟與伺服器端執行相同，包括如果 definePageMeta 函式中定義了 validate 方法。
步驟 3：執行 Nuxt App 中介軟體
Nuxt 中介軟體在伺服器和客戶端上執行。如果你希望某些程式碼在特定環境中執行，請考慮使用 import.meta.client 用於客戶端，import.meta.server 用於伺服器來拆分程式碼。
步驟 4：掛載 Vue 應用程式和水合
呼叫 app.mount('#__nuxt') 將 Vue 應用程式掛載到 DOM。如果應用程式使用 SSR 或 SSG 模式，Vue 會執行水合步驟以使客戶端應用程式具有互動性。在水合期間，Vue 會重新建立應用程式（伺服器元件除外），將每個元件與其相應的 DOM 節點匹配，並附加 DOM 事件監聽器。
為了確保正確的水合，保持伺服器和客戶端之間資料的一致性至關重要。對於 API 請求，建議使用 useAsyncData、useFetch 或其他 SSR 友好的組合式函式。這些方法確保在水合期間重用伺服器端獲取的資料，避免重複請求。任何新的請求都應僅在水合後觸發，以防止水合錯誤。
app:beforeMount 鉤子。app:mounted 鉤子。步驟 5：Vue 生命週期
與伺服器不同，瀏覽器執行完整的Vue 生命週期.