v3.16
Nuxt on GitHub

onPrehydrate

源代码
使用 onPrehydrate 在客户端上 Nuxt 渲染页面之前立即运行回调函数。
此可组合函数在 Nuxt v3.12+ 版本中可用。

onPrehydrate 是一个可组合的生命周期钩子，允许您在客户端上 Nuxt 渲染页面之前立即运行一个回调函数。

这是一个高级工具，应谨慎使用。例如，nuxt-time 和 @nuxtjs/color-mode 会操作 DOM 以避免渲染不匹配。

使用方法

onPrehydrate 可以在 Vue 组件的 setup 函数中直接调用（例如，在 <script setup> 中），或在插件中使用。 它仅在服务器端调用时有效，且不会包含在客户端构建中。

参数

  • callback：一个将被字符串化并内联到 HTML 中的函数。它不应有任何外部依赖（例如自动导入），也不应引用回调外部定义的变量。回调将在 Nuxt 运行时初始化之前运行，因此不应依赖 Nuxt 或 Vue 上下文。

示例

app.vue
// onPrehydrate 保证在 Nuxt 渲染之前运行
onPrehydrate(() => {
  console.log(window)
})

// 只要只有一个根节点，您就可以访问该元素
onPrehydrate((el) => {
  console.log(el.outerHTML)
  // <div data-v-inspector="app.vue:15:3" data-prehydrate-id=":b3qlvSiBeH:"> 你好 </div>
})

// 对于非常高级的用例（例如没有单一根节点），您可以自行访问/设置 `data-prehydrate-id`
const prehydrateId = onPrehydrate((el) => {})
</script>

<template>
  <div>
    你好
  </div>
</template>