Nuxt3 的生命周期和鉤子函數（一）

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

excerpt:
摘要：本文是關于Nuxt3的系列文章之一，主要探討Nuxt3的生命周期和鉤子函數，引導讀者深入了解其在前端開發中的應用。文章提供了往期相關文章鏈接，涉及Nuxt中間件、Composables、狀態管理、路由系統、組件開發等多個方面，幫助讀者全面掌握Nuxt3框架的特性和實踐技巧。

categories:

前端開發

tags:

Nuxt3
生命周期
鉤子函數
前端開發
Web框架
Vue.js
應用教程

在這里插入圖片描述

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

app:created

描述：在初始 Vue 應用實例創建時調用。這個鉤子是在 Nuxt 應用啟動時，Vue 應用實例被創建之后立即觸發的。
服務器端：?
客戶端：?

用法

app:created 鉤子可以在 nuxt.config.ts 文件中的 plugins 或者在頁面組件中使用。

示例代碼

在 nuxt.config.ts 中的插件中使用：

// nuxt.config.ts
export default defineNuxtConfig({plugins: [{src: '~/plugins/my-plugin',mode: 'client', // 或者 'server' 或 'all'},],
})// plugins/my-plugin.ts
export default defineNuxtPlugin((nuxtApp) => {nuxtApp.hook('app:created', () => {console.log('Vue 應用實例已創建');// 這里可以執行一些初始化邏輯});
});

在頁面組件中使用：

<template><div>頁面內容</div>
</template><script setup>
import { onBeforeMount } from 'vue'onBeforeMount(() => {// 這個鉤子會在 'app:created' 之后調用console.log('頁面組件即將掛載');
})const nuxtApp = useNuxtApp()nuxtApp.hook('app:created', () => {console.log('Vue 應用實例已創建 - 頁面級別');
});
</script>

在這個示例中，app:created 鉤子被用于在 Vue 應用實例創建時輸出一條消息。這可以用于執行一些全局的初始化任務，比如設置全局變量或狀態，注冊全局組件等。需要注意的是，在服務器端渲染 (SSR) 的上下文中，這個鉤子會在服務器上為每個請求調用一次。在客戶端，這個鉤子只在應用初始化時調用一次。

app:error err 服務器端和客戶端在發生致命錯誤時調用。

詳細解釋

app:error 是 Nuxt 3 的一個全局生命周期鉤子，它在服務器端和客戶端發生未捕獲的致命錯誤時被調用。這個鉤子允許你定義一個自定義的錯誤處理函數，以便在發生錯誤時執行特定的邏輯，比如記錄錯誤信息、發送錯誤報告、顯示錯誤消息或者重定向到錯誤頁面。

用法

在 Nuxt 3 應用中，你可以通過在 defineNuxtPlugin 函數中注冊 app:error 鉤子來使用它。

export default defineNuxtPlugin((nuxtApp) => {nuxtApp.hook('app:error', (err, ctx) => {// 自定義錯誤處理邏輯});
});

案例Demo

// plugins/error-handler.js
export default defineNuxtPlugin((nuxtApp) => {nuxtApp.hook('app:error', (err, ctx) => {console.error('An error occurred:', err.message);// 如果是客戶端錯誤，可以顯示一個錯誤消息給用戶if (process.client) {alert('An error occurred: ' + err.message);}// 如果是服務器端錯誤，可以記錄到日志文件或發送到錯誤追蹤服務if (process.server) {// 例如，使用 winston 或其他日志庫記錄錯誤// logger.error('Server error:', err);// 或者發送錯誤到錯誤追蹤服務，如 Sentry// Sentry.captureException(err);}// 可以根據錯誤類型決定是否重定向if (err.statusCode === 404) {// 重定向到404頁面ctx.redirect('/404');}});
});

在這個案例中，我們定義了一個 app:error 鉤子，當發生錯誤時，它會打印錯誤信息到控制臺。如果是客戶端錯誤，它會彈出一個包含錯誤信息的警告框。如果是服務器端錯誤，它可以記錄錯誤日志或發送錯誤到錯誤追蹤服務。此外，如果錯誤是一個特定的狀態碼（例如404），我們可以重定向用戶到一個特定的頁面。

app:error:cleared { redirect? } 服務器端和客戶端在致命錯誤被清除后調用。

詳細解釋

app:error:cleared 是 Nuxt 3 的一個全局生命周期鉤子，它在服務器端和客戶端的致命錯誤被清除后調用。這個鉤子允許你在錯誤被處理后執行后續操作，比如重定向用戶到另一個頁面。這個鉤子接收一個可選的 redirect 參數，它允許你指定一個重定向的路徑。

用法

在 Nuxt 3 應用中，你可以通過在 defineNuxtPlugin 函數中注冊 app:error:cleared 鉤子來使用它。

export default defineNuxtPlugin((nuxtApp) => {nuxtApp.hook('app:error:cleared', (redirect, ctx) => {// 自定義錯誤清除后的邏輯});
});

案例Demo

// plugins/error-clear-handler.js
export default defineNuxtPlugin((nuxtApp) => {nuxtApp.hook('app:error:cleared', (redirect, ctx) => {// 如果提供了重定向路徑，則進行重定向if (redirect) {ctx.redirect(redirect);}// 可以在這里執行其他清理工作，例如清除錯誤狀態// 或者通知用戶錯誤已經被處理if (process.client) {// 例如，更新UI來反映錯誤已經被處理// updateErrorState(false);}// 如果是服務器端，可能需要清除服務器狀態或發送通知if (process.server) {// 清理服務器狀態或發送通知// serverCleanup();}});
});

在這個案例中，我們定義了一個 app:error:cleared 鉤子，當致命錯誤被清除后，它會檢查是否提供了重定向路徑，如果提供了，則執行重定向。此外，它還可以執行其他清理工作，例如在客戶端更新UI狀態以反映錯誤已經被處理，或者在服務器端清理服務器狀態或發送通知。這個鉤子是處理錯誤后恢復應用狀態的有用工具。

app:data:refresh keys? 服務器端和客戶端 (內部)

詳細解釋

app:data:refresh 是 Nuxt 3 中的一個內部生命周期鉤子，主要用于數據刷新。它在需要重新獲取數據時被觸發，通常發生在用戶刷新頁面或者在某些情況下數據更新后。keys 參數是可選的，它是一個數組，包含需要刷新的數據的鍵名，如果不提供，會刷新所有數據。

用法

在 Nuxt 3 中，你通常不會直接在 defineNuxtPlugin 中使用這個鉤子，因為它是內部調用的。然而，如果你需要在插件中影響數據刷新行為，可以通過監聽相關事件來間接使用。

export default defineNuxtPlugin((nuxtApp) => {nuxtApp.on('dataRefresh', (keys) => {// 在這里處理數據刷新操作，例如更新緩存、請求新數據等if (keys) {// 如果提供了keys，只刷新指定的數據keys.forEach((key) => {nuxtApp.$store.dispatch('refreshData', key);});} else {// 否則刷新所有數據nuxtApp.$store.dispatch('refreshAllData');}});
});

案例Demo

// plugins/data-refresh.js
export default defineNuxtPlugin((nuxtApp) => {nuxtApp.on('dataRefresh', async (keys) => {if (keys) {const promises = keys.map(async (key) => {const freshData = await fetchNewData(key);nuxtApp.$store.commit('updateData', { key, data: freshData });});await Promise.all(promises);} else {const allData = await fetchAllData();nuxtApp.$store.commit('updateAllData', { data: allData });}});
});// 在 store 中定義 mutation
export const mutations = {updateData(state, { key, data }) {state[key] = data;},updateAllData(state, { data }) {state = data;},
};

在這個案例中，我們創建了一個插件，監聽 dataRefresh 事件。當事件觸發時，我們根據提供的 keys 刷新指定的數據，或者刷新所有數據。然后，我們更新 Vuex 存儲中的數據。注意，實際的 fetchNewData 和 fetchAllData 需要你根據你的應用邏輯來實現。

vue:setup - 服務器端和客戶端 (內部)

詳細解釋

vue:setup 是 Nuxt 3 中的一個生命周期鉤子，它在每個 Vue 組件的 setup 階段被調用。這個鉤子主要用于在組件的初始化階段進行數據處理、依賴注入、API 設置等操作。由于它是基于 Vue 的，所以它在客戶端和服務器端都會執行，但服務器端渲染時，它主要作用于預渲染階段。

用法

在 Nuxt 3 中，vue:setup 通常用于創建自定義組件，它會接收一個 app 對象，你可以通過這個對象訪問 Nuxt 應用實例。例如，你可以注入 $store 或 $router，并定義組件的局部狀態和方法。

export default defineComponent({setup() {const store = inject('store');const router = inject('router');// 在這里定義組件的局部狀態和方法const count = ref(0);const increment = () => {count.value++;};// 使用store和routerwatch(() => router.currentRoute.value.name, () => {// 當路由改變時執行某些操作});return {count,increment,};},
});

案例Demo

// components/MyComponent.vue
export default defineComponent({setup() {const { $store } = inject();const myData = ref($store.state.myData);// 在setup中獲取并使用store中的數據useEffect(() => {async function fetchData() {const newData = await fetchMyData();myData.value = newData;}fetchData();}, []);// 示例方法，使用store數據const updateData = (newValue) => {myData.value = newValue;$store.commit('updateMyData', newValue);};return {myData,updateData,};},
});// 在store/index.js中定義mutation
export const mutations = {updateMyData(state, newData) {state.myData = newData;},
};

在這個案例中，我們在 vue:setup 中注入 $store，獲取并使用存儲中的數據。當組件掛載時，我們會從服務器獲取數據并更新組件狀態。同時，我們定義了一個 updateData 方法，用于更新 store 中的數據。在客戶端和服務器端，這個組件都會執行這些操作。