defineLazyHydrationComponent

源文件
定义一个具有特定策略的延迟水合组件。

defineLazyHydrationComponent 是一个编译宏，可帮助您创建具有特定延迟水合策略的组件。延迟水合会推迟水合，直到组件可见或浏览器完成更多关键任务。这可以显著降低初始性能成本，特别是对于非必要的组件。

使用

可见性策略 (Visibility Strategy)

当组件在视口中可见时进行水合。

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

<template>
  <div>
    <!--
      Hydration will be triggered when
      the element(s) is 100px away from entering the viewport.
    -->
    <LazyHydrationMyComponent :hydrate-on-visible="{ rootMargin: '100px' }" />
  </div>
</template>

hydrateOnVisible 属性是可选的。您可以传递一个对象来定制底层 IntersectionObserver 的行为。

阅读有关 hydrate-on-visible 选项的更多信息。
在底层，这使用了 Vue 内置的hydrateOnVisible 策略.

空闲策略 (Idle Strategy)

当浏览器处于空闲状态时水合组件。如果需要组件尽快加载，但又不想阻塞关键渲染路径，则适用此策略。

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

<template>
  <div>
    <!-- Hydration will be triggered when the browser is idle or after 2000ms. -->
    <LazyHydrationMyComponent :hydrate-on-idle="2000" />
  </div>
</template>

hydrateOnIdle 属性是可选的。您可以传递一个正数来指定最大超时时间。

空闲策略适用于可以在浏览器空闲时进行水合的组件。

在底层，这使用了 Vue 内置的hydrateOnIdle 策略.

交互策略 (Interaction Strategy)

在指定交互（例如，点击、鼠标悬停）后水合组件。

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

<template>
  <div>
    <!--
      Hydration will be triggered when
      the element(s) is hovered over by the pointer.
    -->
    <LazyHydrationMyComponent hydrate-on-interaction="mouseover" />
  </div>
</template>

hydrateOnInteraction 属性是可选的。如果您没有传递事件或事件列表，它默认在 pointerenter、click 和 focus 上进行水合。

在底层，这使用了 Vue 内置的hydrateOnInteraction 策略.

媒体查询策略 (Media Query Strategy)

当窗口匹配媒体查询时水合组件。

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

<template>
  <div>
    <!--
      Hydration will be triggered when
      the window width is greater than or equal to 768px.
    -->
    <LazyHydrationMyComponent hydrate-on-media-query="(min-width: 768px)" />
  </div>
</template>
在底层，这使用了 Vue 内置的hydrateOnMediaQuery 策略.

时间策略 (Time Strategy)

在指定的延迟（毫秒）后水合组件。

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

<template>
  <div>
    <!-- Hydration is triggered after 1000ms. -->
    <LazyHydrationMyComponent :hydrate-after="1000" />
  </div>
</template>

时间策略适用于可以等待特定时间量的组件。

If 策略 (If Strategy)

根据布尔条件水合组件。

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

const isReady = ref(false)

function myFunction () {
  // Trigger custom hydration strategy...
  isReady.value = true
}
</script>

<template>
  <div>
    <!-- Hydration is triggered when isReady becomes true. -->
    <LazyHydrationMyComponent :hydrate-when="isReady" />
  </div>
</template>

If 策略最适合那些不总是需要水合的组件。

永不水合 (Never Hydrate)

从不水合组件。

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

<template>
  <div>
    <!-- This component will never be hydrated by Vue. -->
    <LazyHydrationMyComponent />
  </div>
</template>

监听水合事件 (Listening to Hydration Events)

所有延迟水合组件在它们被水合时都会发出一个 @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'
  • 必需: true
策略 (Strategy)描述
visible组件在视口中可见时进行水合。
idle在浏览器空闲时或延迟后进行水合。
interaction在用户交互（例如，点击、悬停）时进行水合。
mediaQuery当指定的媒体查询条件满足时进行水合。
if当指定的布尔条件满足时进行水合。
time在指定的时间延迟后进行水合。
never阻止 Vue 水合组件。

source

  • 类型: () => Promise<Component>
  • 必需: true