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

概述了Nuxt3的六個關鍵生命周期鉤子用途：modules:before至build:before，指導如何在應用初始化、模塊管理、配置解析、模板處理及構建前執行自定義操作，附帶實例代碼，強化Nuxt應用的靈活性和可控性。 ...

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

excerpt:
概述了Nuxt3的六個關鍵生命周期鉤子用途：modules:before至build:before，指導如何在應用初始化、模塊管理、配置解析、模板處理及構建前執行自定義操作，附帶實例代碼，強化Nuxt應用的靈活性和可控性。

categories:

前端開發

tags:

Nuxt3
生命周期
鉤子函數
模塊管理
應用構建
配置優化
模板定製

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

鉤子：`modules:before`

參數：

nuxtApp: Nuxt 應用實例，提供核心 API 和應用配置訪問。

環境：

開發環境 (dev)
生產環境 (prod)

描述： modules:before 是 Nuxt.js 中的一個生命周期鉤子，它在應用初始化階段，且在安裝用戶自定義模塊之前被調用。這個鉤子允許開發者在模塊安裝前執行一些全局設置、數據準備或者進行必要的配置檢查。

詳細解釋：

用法示例

要使用 modules:before，你需要創建一個 Nuxt 插件（plugins文件夾內），並使用defineNuxtPlugin 函數來定義這個鉤子：

// plugins/my-plugin.js
export default defineNuxtPlugin((nuxtApp) => {
  // 在這裡編寫你的代碼
  nuxtApp.$emit('my-plugin-event', 'Before modules installation');

  // 例如，你可以設置全局變數或配置
  nuxtApp.config.globalProperties.$myPluginValue = 'Initial value';
});

案例演示

下麵是一個簡單的案例，展示瞭如何在 modules:before 鉤子中執行一些操作：

// plugins/my-plugin.js
export default defineNuxtPlugin((nuxtApp) => {
  // 檢查並設置全局變數
  if (!nuxtApp.config.someGlobalVariable) {
    nuxtApp.config.someGlobalVariable = 'Default value';
    console.log('Setting default global variable');
  }

  // 觸發一個自定義事件
  nuxtApp.$emit('my-plugin-event', 'Before modules');

  // 如果是開發環境，添加額外的調試信息
  if (process.env.NODE_ENV === 'development') {
    console.log('Running in development mode');
  }
});

在這個案例中，modules:before 鉤子確保了全局變數的存在，觸發了一個自定義事件，並根據環境提供不同的提示。這有助於確保模塊安裝前應用的狀態是正確的。

鉤子：`modules:done`

參數：

nuxtApp: Nuxt.js 應用實例，提供了與應用交互的介面。

環境：

Nuxt.js 初始化階段
在所有用戶自定義模塊（plugins 或 custom modules）安裝並初始化後

描述：

modules:done 是 Nuxt.js 的生命周期鉤子之一，它在所有模塊（包括用戶定義的模塊和第三方模塊）安裝完成之後被調用。這個鉤子允許開發者在所有模塊都已經設置好之後執行一些後續操作，例如初始化某些功能或執行跨模塊的檢查。

詳細解釋與用法實例：

在 Nuxt 3 中，插件可以通過 defineNuxtPlugin 函數定義，併在其中使用 nuxtApp 實例的 $on 方法來監聽 modules:done 鉤子。以下是一個使用該鉤子的插件示例：

// plugins/my-plugin.js
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('modules:done', () => {
    // 執行一些所有模塊安裝完成後的操作
    console.log('所有模塊已安裝完成！');
    // 這裡可以執行一些邏輯，比如初始化全局狀態或設置全局配置
  });
});

實戰案例demo：

以下是一個實戰案例，其中我們使用 modules:done 鉤子來確保所有模塊載入完成後，執行一個檢查所有模塊是否正確配置的函數。

// plugins/check-modules.js
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('modules:done', async () => {
    // 檢查是否所有必須的模塊都已載入
    const requiredModules = ['@nuxtjs/axios', 'nuxt-i18n'];
    const loadedModules = nuxtApp.$options.nuxt.modules.map(module => module.name);

    const missingModules = requiredModules.filter(module => !loadedModules.includes(module));

    if (missingModules.length > 0) {
      console.error(`以下模塊未載入：${missingModules.join(', ')}`);
    } else {
      console.log('所有必須的模塊已載入！');
      // 如果所有必須的模塊都已載入，執行一些初始化操作
      // 例如，初始化API服務
      await nuxtApp.$axios.get('/api/initialize');
    }
  });
});

在這個案例中，我們定義了一個必須載入的模塊列表 requiredModules，然後在 modules:done 鉤子中檢查這些模塊是否已經載入。如果有缺失的模塊，我們會在控制臺中列印錯誤消息；如果所有模塊都已載入，我們將執行一些初始化操作，例如調用一個API來初始化應用程式。

鉤子：`app:resolve`

參數：

nuxtApp: Nuxt.js 應用實例，包含了應用的核心配置和功能。

環境：

Nuxt.js 初始化階段
在 nuxtApp 實例解析完成之後調用

描述：

app:resolve 是 Nuxt.js 的一個生命周期鉤子，它在 Nuxt 應用實例解析完成，但可能還未完全初始化之前被調用。這個鉤子適合在應用的配置被解析後執行一些操作，比如修改預設配置、添加全局中間件等。

詳細解釋與用法實例：

在 Nuxt 3 中，你可以使用 defineNuxtPlugin 函數定義插件，併在 app:resolve 鉤子中進行配置修改。以下是一個簡單的例子：

// plugins/my-plugin.js
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('app:resolve', (resolve) => {
    // 修改預設配置
    resolve.options.someGlobalOption = 'myCustomValue';

    // 添加全局中間件
    resolve.addMiddleware('myMiddleware', (to, from, next) => {
      console.log('Middleware executed before route change');
      next();
    });
  });
});

實戰案例demo：

在以下案例中，我們使用 app:resolve 鉤子來添加一個全局的全局頭部組件和修改路由守衛：

// plugins/global-config.js
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('app:resolve', async (resolve) => {
    // 添加全局頭部組件
    resolve.options.headComponents = ['~/components/global-header.vue'];

    // 修改路由守衛
    resolve.options.router.beforeEach = (to, from, next) => {
      console.log('Before each route:', to, from);
      next();
    };
  });
});

在這個例子中，當 Nuxt 應用解析時，會自動添加全局頭部組件 global-header.vue，併在所有路由跳轉前執行我們自定義的路由守衛。這在全局配置或者需要在所有頁面共用的邏輯中非常有用。

鉤子：`app:templates`

參數：

nuxtApp: Nuxt.js 應用實例，包含了應用的核心配置和功能。

環境：

Nuxt.js 應用生成過程中
在 NuxtApp 的模板文件被處理之前調用

描述：

app:templates 是 Nuxt.js 的一個生命周期鉤子，它允許開發者在 Nuxt 應用生成過程中自定義、修改或添加新的文件到構建目錄。這個鉤子可以用來添加自定義的模板文件，或者根據項目需求修改現有的模板。

鉤子：`app:templatesGenerated`

鉤子：`build:before`

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

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

鉤子：modules:before

鉤子：modules:done

鉤子：app:resolve

鉤子：app:templates

鉤子：app:templatesGenerated

鉤子：build:before

往期文章歸檔：

鉤子：`modules:before`

鉤子：`modules:done`

鉤子：`app:resolve`

鉤子：`app:templates`

鉤子：`app:templatesGenerated`

鉤子：`build:before`