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