Nuxt 入门实战 - 02：nuxt中的各种Hooks

两个核心上下文

• nuxt: 全局上下文，可获取nuxt.config配置
• nuxtApp：界面共享上下文，有vue实例、运行时钩子、内部状态ssrContext、payload等，可通过useNuxtApp获取（Runtime Core）

生命周期钩子

Nuxt Hook(build Time)

• nuxt.config使用钩子

  //nuxt.config
  export default defineNuxtConfig({
    hooks: {
      'close': () => { }
    }
  })

• defineNuxtModule 方式使用钩子

  import { defineNuxtModule } from '@nuxt/kit'
  
  export default defineNuxtModule({
    setup (options, nuxt) {
      nuxt.hook('close', async () => { })
    }
  })

App Hooks（Runtime）

• 插件使用钩子

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

Nitro Plugin

• 使用钩子

  //~/server/plugins/test.ts
  export default defineNitroPlugin((nitroApp) => {
    nitroApp.hooks.hook('render:html', (html, { event }) => {
      console.log('render:html', html)
      html.bodyAppend.push('<hr>Appended by custom plugin')
    })
  
    nitroApp.hooks.hook('render:response', (response, { event }) => {
      console.log('render:response', response)
    })
  })

参考文献

• https://nuxt.com/docs/guide/going-further/internals