choukin

V1

2022/07/30阅读:69主题:默认主题

[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 钩子 (构建阶段)

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

分类:

前端

标签:

Vue.js

作者介绍

choukin
V1