---

title: Nuxt3 的生命周期和鉤子函數（二）
date: 2024/6/26
updated: 2024/6/26
author: cmdragon

excerpt:
摘要：本文深入介紹了Nuxt.js框架中幾個關鍵的生命周期鉤子函數，包括app:redirected（SSR環境下重定向前觸發）、app:beforeMount（CSR下應用掛載前）、app:mounted（CSR下Vue應用在瀏覽器掛載時）、app:suspense:resolve（CSR中Suspense組件解析子組件完成時）以及link:prefetch（CSR中NuxtLink預取鏈接時）和page:start（CSR頁面渲染啟動時）。通過代碼示例展示了如何利用defineNuxtPlugin定義插件并借助nuxtApp.hook監聽這些鉤子以執行特定任務，強調了各鉤子的應用場景及在客戶端和服務器端的不同行為。

categories:

• 前端開發

tags:

• Nuxt3
• SSR
• CSR
• 鉤子函數
• 生命周期
• Vue.js
• 頁面渲染

---

掃碼關注或者微信搜一搜：編程智域 前端至全棧交流與成長

app:redirected

參數：無
環境：服務器端（Server-Side Rendering, SSR）

描述：

在 Nuxt.js 中，app:redirected 是一個鉤子函數，它會在服務器端渲染（SSR）重定向（redirect）之前被調用。

詳細解釋：

在 Nuxt.js 應用程序中，可以使用鉤子函數來在特定的生命周期事件中執行自定義的 JavaScript 代碼。app:redirected 鉤子函數在服務器端渲染（SSR）期間，在重定向（redirect）發生前被調用。

使用示例：

可以使用 export default defineNuxtPlugin() 的方式來使用此鉤子函數，如下所示：

export default defineNuxtPlugin((nuxtApp) => {nuxtApp.hook('app:redirected', () => {// 在這里編寫重定向前需要執行的代碼console.log('重定向前執行的代碼...')})
})

在上面的示例中，我們使用 defineNuxtPlugin() 函數來注冊一個插件，并在插件函數中使用 nuxtApp.hook() 函數來注冊 app:redirected 鉤子函數。在鉤子函數中，我們可以編寫重定向前需要執行的代碼。

需要注意的是，app:redirected 鉤子函數只會在服務器端渲染（SSR）期間被調用，因此在客戶端渲染（Client-Side Rendering, CSR）期間是不會被調用的。

app:beforeMount

參數：vueApp

環境：客戶端端（Client-Side Rendering, CSR）

描述：

在 Nuxt.js 中，app:beforeMount 是一個鉤子函數，它會在應用程序掛載之前被調用，僅在客戶端端調用。

詳細解釋：

在 Nuxt.js 應用程序中，可以使用鉤子函數來在特定的生命周期事件中執行自定義的 JavaScript 代碼。app:beforeMount 鉤子函數會在應用程序掛載之前被調用，且僅在客戶端端（Client-Side Rendering, CSR）調用。

使用示例：

可以使用 export default defineNuxtPlugin() 的方式來使用此鉤子函數，如下所示：

export default defineNuxtPlugin((nuxtApp) => {nuxtApp.hook('app:beforeMount', (vueApp) => {// 在這里編寫應用程序掛載前需要執行的代碼console.log('應用程序掛載前執行的代碼...')console.log(vueApp)})
})

在上面的示例中，我們使用 defineNuxtPlugin() 函數來注冊一個插件，并在插件函數中使用 nuxtApp.hook() 函數來注冊 app:beforeMount 鉤子函數。在鉤子函數中，我們可以編寫應用程序掛載前需要執行的代碼，并可以通過 vueApp 參數獲取 Vue.js 應用程序實例。

需要注意的是，app:beforeMount 鉤子函數僅在客戶端端渲染（Client-Side Rendering, CSR）期間被調用，因此在服務器端渲染（Server-Side Rendering, SSR）期間是不會被調用的。

app:mounted

參數：vueApp

環境：客戶端端（Client-Side Rendering, CSR）

描述：

在 Nuxt.js 中，app:mounted 是一個鉤子函數，它會在 Vue 應用程序初始化并在瀏覽器中掛載時調用，僅在客戶端端調用。

詳細解釋：

在 Nuxt.js 應用程序中，可以使用鉤子函數來在特定的生命周期事件中執行自定義的 JavaScript 代碼。app:mounted 鉤子函數會在 Vue 應用程序初始化并在瀏覽器中掛載時被調用，且僅在客戶端端（Client-Side Rendering, CSR）調用。

使用示例：

可以使用 export default defineNuxtPlugin() 的方式來使用此鉤子函數，如下所示：

export default defineNuxtPlugin((nuxtApp) => {nuxtApp.hook('app:mounted', (vueApp) => {// 在這里編寫 Vue 應用程序初始化并在瀏覽器中掛載時需要執行的代碼console.log('Vue 應用程序初始化并在瀏覽器中掛載時執行的代碼...')console.log(vueApp)})
})

在上面的示例中，我們使用 defineNuxtPlugin() 函數來注冊一個插件，并在插件函數中使用 nuxtApp.hook() 函數來注冊 app:mounted 鉤子函數。在鉤子函數中，我們可以編寫 Vue 應用程序初始化并在瀏覽器中掛載時需要執行的代碼，并可以通過 vueApp 參數獲取 Vue.js 應用程序實例。

需要注意的是，app:mounted 鉤子函數僅在客戶端端渲染（Client-Side Rendering, CSR）期間被調用，因此在服務器端渲染（Server-Side Rendering, SSR）期間是不會被調用的。

app:suspense:resolve

參數：appComponent

環境：客戶端端（Client-Side Rendering, CSR）

描述：

在 Nuxt.js 應用程序中，app:suspense:resolve 是一個鉤子函數，它會在 Suspense 組件解析其子組件時調用。此鉤子僅在客戶端端（CSR）執行。

詳細解釋：

Suspense 是 Vue 3 引入的一個用于處理異步組件和異步依賴的組件。在 Nuxt.js 中，你可以使用 app:suspense:resolve 鉤子來監聽 Suspense 組件解析其子組件的事件。當 Suspense 組件的子組件全部解析完成時，此鉤子會被觸發。

使用示例：

以下是如何使用 export default defineNuxtPlugin() 方式注冊 app:suspense:resolve 鉤子的示例代碼：

export default defineNuxtPlugin((nuxtApp) => {nuxtApp.hook('app:suspense:resolve', (appComponent) => {// 在這里編寫當 Suspense 解析事件發生時需要執行的代碼console.log('Suspense 組件解析完成，子組件已準備就緒...')console.log(appComponent)})
})

在上面的代碼中，我們注冊了一個插件并在插件內部使用 nuxtApp.hook() 方法來監聽 app:suspense:resolve 事件。當 Suspense 組件解析其子組件時，會調用這個鉤子函數，并傳入 appComponent 參數，該參數是解析完成的組件實例。

案例 Demo：

link:prefetch

page:start

余下文章內容請點擊跳轉至 個人博客頁面 或者 掃碼關注或者微信搜一搜：編程智域 前端至全棧交流與成長，閱讀完整的文章：Nuxt3 的生命周期和鉤子函數（二） | cmdragon’s Blog

往期文章推薦：

往期文章歸檔：

• Nuxt3 的生命周期和鉤子函數（一） | cmdragon’s Blog
• 初學者必讀：如何使用 Nuxt 中間件簡化網站開發 | cmdragon’s Blog
• 深入探索 Nuxt3 Composables：掌握目錄架構與內置API的高效應用 | cmdragon’s Blog
• 掌握 Nuxt 3 中的狀態管理：實踐指南 | cmdragon’s Blog
• Nuxt 3 路由系統詳解：配置與實踐指南 | cmdragon’s Blog
• Nuxt 3組件開發與管理 | cmdragon’s Blog
• Nuxt3頁面開發實戰探索 | cmdragon’s Blog
• Nuxt.js 深入淺出：目錄結構與文件組織詳解 | cmdragon’s Blog
• 安裝 Nuxt.js 的步驟和注意事項 | cmdragon’s Blog
• 探索Web Components | cmdragon’s Blog
• Vue微前端架構與Qiankun實踐理論指南 | cmdragon’s Blog
• Vue 3深度探索：自定義渲染器與服務端渲染 | cmdragon’s Blog