[Nuxt 3] (十四) Nuxt 生命周期

人性本来就充满了矛盾，这个世界不是非黑即白的，真挚中也包含着一些做作，高尚中也有一些卑鄙，即使是邪恶，也蕴藏着一些美德。 ——《月亮与六便士》

生命周期钩子

Nuxt 提供一个强大的钩子系统，由于unjs/hookable提供的钩子来提供支持几乎可以扩展每个生命周期.

Nuxt Hooks (构建时)

这些钩子在Nuxt模块 和构建上下文可用

在nuxt.config中使用

export default defineNuxtConfig({
  hooks: {
    'close': () => { }
  }
})

在Nuxt模块中使用

import { defineNuxtModule } from '@nuxt/kit'

export default defineNuxtModule({
  setup (options, nuxt) {
    nuxt.hook('close', async () => { })
  })
})

App Hooks (运行时)

应用的钩子，主要在Nuxt 插件中使用 用来挂钩到渲染时的生命周期，也可以在Vue 组合API中使用。

在插件中使用

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.hook('page:start', () => {
        /* your code goes here */
     })
})

生命周期钩子函数

::ReadMore{link="/guide/going-further/hooks"} ::

APP钩子(运行时)

参阅 源码 了解所有的可用钩子。

钩子	参数	描述
app:created	vueApp	当 vueApp实例初始化后调用
app:beforeMount	vueApp	和app:created一样
app:mounted	vueApp	当Vue应用初始化后并且挂载到浏览器上后调用
app:rendered	-	当服务端渲染后调用
app:suspense:resolve	appComponent	在 Suspense 中处理是事件
page:start	pageComponent	在 Suspense 开始处理时触发
page:finish	pageComponent	在 Suspense 处理完成后调用
meta:register	metaRenderers	(内部的)
vue:setup	-	(内部的)

Nuxt 钩子 (构建阶段)

查看 源码 了解所有可用的钩子.