Nuxt 3 生命周期钩子

Nuxt 提供了一系列的生命周期钩子 Lifecycle Hooks 以便在应用构建和运行的特定阶段执行操作。

参考

可以将生命周期钩子系统分为 3 种类型，分别对应于 Nuxt 应用的三个阶段

Nuxt Hooks 是在应用构建时 Build Time 可以调用的钩子，一般用于 Nuxt Modules 模块中
App Hooks 是在前端应用运行时（或 SSR 期间） Runtime 可以调用的钩子，一般用于 Nuxt Plugins 插件中，以便在页面渲染 rendering 时执行特定的操作。也可由用于组件中
Nitro App Hooks 是在后端服务器运行 Runtime 时可以调用的钩子，一般用于 Nuxt Plugins 插件中，以定制后端引擎 Nitro 运行时的行为

Nuxt Hooks

在应用构建时 Build Time 可以调用的钩子

参考

所有可以调用的 Nuxt Hooks 可以查看官方文档，或源码中所定义的 NuxtHooks schema（数据的架构模式/类型）

可以在配置文件 📄 nuxt.config.ts 的属性 hooks 设置相应的构造时的钩子函数

nuxt.config.test

test

export default defineNuxtConfig({
  hooks: {
    // 当 Nuxt 应用实例销毁时调用
    'close': () => { }
  }
})

也可以在 Nuxt Module 模块中设置相应的构造时的钩子函数

import { defineNuxtModule } from '@nuxt/kit'

// 创建一个模块
export default defineNuxtModule({
  // 模块注册时会调用该方法
  setup (options, nuxt) {
    // 在其中编写模块的逻辑
    // 设置一个 close 钩子函数，当 Nuxt 应用实例销毁时调用
    nuxt.hook('close', async () => { })
  }
})

App Hooks

在应用运行时 Runtime 可以调用的钩子

参考

所有可以调用的 Nuxt Hooks 可以查看官方文档，或源码中所定义的 RuntimeNuxtHooks ❓ schema（数据的架构模式/类型）

可以在 Nuxt Plugin 插件中设置相应的运行时的钩子函数

plugins/test.ts

export default defineNuxtPlugin((nuxtApp) => {
    // 设置一个 page:start 钩子函数，当导航进入一个页面，并处于 Suspense 等待时调用
    nuxtApp.hook('page:start', () => {
        /* your code goes here */
     })
})

Nitro App Hooks

在后端服务器运行 Runtime 时可以调用的钩子

参考

所有可以调用的 Nuxt Hooks 可以查看官方文档

可以在服务端的 Nuxt Plugin 插件中设置相应的服务端运行时的钩子函数

server/plugins/test.ts

// 创建一个后端引擎 Nitro 的插件
export default defineNitroPlugin((nitroApp) => {
  // 设置一个 render:html 钩子函数，在生成/渲染 HTML 页面之前调用
  nitroApp.hooks.hook('render:html', (html, { event }) => {
    console.log('render:html', html)
    html.bodyAppend.push('<hr>Appended by custom plugin')
  })

  // 设置一个 render:response 钩子函数，在后端返回响应数据之前调用
  nitroApp.hooks.hook('render:response', (response, { event }) => {
    console.log('render:response', response)
  })
})