透過 100+ 個技巧學習 Nuxt!

onPrehydrate

使用 onPrehydrate 在 Nuxt 頁面 hydration 之前立即在客戶端執行回呼。
此 composable 在 Nuxt v3.12+ 版本中可用。

onPrehydrate 是一個 composable 的生命週期鉤子,可讓您在 Nuxt 頁面 hydration 之前立即在客戶端執行回呼。

這是一個進階工具,應謹慎使用。例如,nuxt-time@nuxtjs/color-mode 操作 DOM 以避免 hydration 不匹配。

用法

onPrehydrate 可以直接在 Vue 元件的 setup 函數中呼叫(例如,在 <script setup> 中),或在外掛程式中呼叫。它只會在伺服器端呼叫時生效,並且不會包含在您的客戶端建置中。

參數

  • callback:一個將被字串化並內聯在 HTML 中的函數。它不應有任何外部依賴項(例如自動匯入)或引用在回呼之外定義的變數。回呼將在 Nuxt 執行階段初始化之前執行,因此不應依賴 Nuxt 或 Vue 上下文。

範例

app.vue
<script setup lang="ts">
// onPrehydrate is guaranteed to run before Nuxt hydrates
onPrehydrate
(() => {
console
.
log
(
window
)
}) // As long as it only has one root node, you can access the element
onPrehydrate
((
el
) => {
console
.
log
(
el
.outerHTML)
// <div data-v-inspector="app.vue:15:3" data-prehydrate-id=":b3qlvSiBeH:"> Hi there </div> }) // For _very_ advanced use cases (such as not having a single root node) you // can access/set `data-prehydrate-id` yourself const
prehydrateId
=
onPrehydrate
((
el
) => {})
</script> <template> <
div
>
Hi there </
div
>
</template>