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