defineLazyHydrationComponent

Source
Определение компонента с отложенной гидратацией и выбранной стратегией.

defineLazyHydrationComponent — компиляторный макрос для создания компонента с выбранной стратегией отложенной гидрации. Гидрация откладывается до появления в viewport или до завершения более важных задач в браузере, что снижает начальную нагрузку, особенно для второстепенных компонентов.

Использование

Стратегия Visibility

Гидрация при появлении компонента в viewport.

<script setup lang="ts">
const LazyHydrationMyComponent = defineLazyHydrationComponent(
  'visible',
  () => import('./components/MyComponent.vue'),
)
</script>

<template>
  <div>
    <!-- гидрация за 100px до появления в viewport -->
    <LazyHydrationMyComponent :hydrate-on-visible="{ rootMargin: '100px' }" />
  </div>
</template>

Проп hydrateOnVisible необязателен; объект настраивает поведение IntersectionObserver.

Опции для hydrate-on-visible.
Используется встроенная стратегия Vue hydrateOnVisible.

Стратегия Idle

Гидрация в момент простоя браузера. Подходит, когда компонент нужен как можно раньше, но не должен блокировать критический путь рендера.

<script setup lang="ts">
const LazyHydrationMyComponent = defineLazyHydrationComponent(
  'idle',
  () => import('./components/MyComponent.vue'),
)
</script>

<template>
  <div>
    <!-- гидрация при простое браузера или через 2000 ms -->
    <LazyHydrationMyComponent :hydrate-on-idle="2000" />
  </div>
</template>

Проп hydrateOnIdle необязателен; положительное число задаёт максимальную задержку в миллисекундах.

Используется встроенная стратегия Vue hydrateOnIdle.

Стратегия Interaction

Гидрация после указанного взаимодействия (клик, наведение и т.д.).

<script setup lang="ts">
const LazyHydrationMyComponent = defineLazyHydrationComponent(
  'interaction',
  () => import('./components/MyComponent.vue'),
)
</script>

<template>
  <div>
    <!-- гидрация при наведении указателя -->
    <LazyHydrationMyComponent hydrate-on-interaction="mouseover" />
  </div>
</template>

Проп hydrateOnInteraction необязателен. Без списка событий по умолчанию: pointerenter, click, focus.

Используется встроенная стратегия Vue hydrateOnInteraction.

Стратегия Media Query

Гидрация при совпадении окна с media query.

<script setup lang="ts">
const LazyHydrationMyComponent = defineLazyHydrationComponent(
  'mediaQuery',
  () => import('./components/MyComponent.vue'),
)
</script>

<template>
  <div>
    <!-- гидрация при ширине окна >= 768px -->
    <LazyHydrationMyComponent hydrate-on-media-query="(min-width: 768px)" />
  </div>
</template>
Используется встроенная стратегия Vue hydrateOnMediaQuery.

Стратегия Time

Гидрация через заданную задержку в миллисекундах.

<script setup lang="ts">
const LazyHydrationMyComponent = defineLazyHydrationComponent(
  'time',
  () => import('./components/MyComponent.vue'),
)
</script>

<template>
  <div>
    <!-- гидрация через 1000 ms -->
    <LazyHydrationMyComponent :hydrate-after="1000" />
  </div>
</template>

Стратегия If

Гидрация по булевому условию.

<script setup lang="ts">
const LazyHydrationMyComponent = defineLazyHydrationComponent(
  'if',
  () => import('./components/MyComponent.vue'),
)

const isReady = ref(false)

function myFunction () {
  // Запуск своей стратегии гидрации...
  isReady.value = true
}
</script>

<template>
  <div>
    <!-- гидрация при isReady === true -->
    <LazyHydrationMyComponent :hydrate-when="isReady" />
  </div>
</template>

Подходит для компонентов, которым гидрация может не понадобиться.

Never (без гидрации)

Компонент не гидратируется.

<script setup lang="ts">
const LazyHydrationMyComponent = defineLazyHydrationComponent(
  'never',
  () => import('./components/MyComponent.vue'),
)
</script>

<template>
  <div>
    <LazyHydrationMyComponent />
  </div>
</template>

Событие гидрации

Компоненты с отложенной гидрацией эмитят событие @hydrated при гидрации.

<script setup lang="ts">
const LazyHydrationMyComponent = defineLazyHydrationComponent(
  'visible',
  () => import('./components/MyComponent.vue'),
)

function onHydrate () {
  console.log('Component has been hydrated!')
}
</script>

<template>
  <div>
    <LazyHydrationMyComponent
      :hydrate-on-visible="{ rootMargin: '100px' }"
      @hydrated="onHydrated"
    />
  </div>
</template>

Параметры

Чтобы макрос корректно распознавался компилятором, не используйте внешние переменные. Такой код макрос не распознает:
<script setup lang="ts">
const strategy = 'visible'
const source = () => import('./components/MyComponent.vue')
const LazyHydrationMyComponent = defineLazyHydrationComponent(strategy, source)
</script>

strategy

  • Тип: 'visible' | 'idle' | 'interaction' | 'mediaQuery' | 'if' | 'time' | 'never'
  • Обязательный: да
СтратегияОписание
visibleГидрация при появлении в viewport.
idleГидрация при простое браузера или после задержки.
interactionГидрация при взаимодействии (клик, наведение).
mediaQueryГидрация при выполнении media query.
ifГидрация по булевому условию.
timeГидрация через заданную задержку.
neverVue не гидратирует компонент.

source

  • Тип: () => Promise<Component>
  • Обязательный: да