defineLazyHydrationComponent

ソース
特定の戦略を持つ遅延ハイドレーションコンポーネントを定義します。

defineLazyHydrationComponentは、特定の遅延ハイドレーション戦略を持つコンポーネントを作成するのに役立つコンパイラマクロです。遅延ハイドレーションは、コンポーネントが表示されるまで、またはブラウザがより重要なタスクを完了するまでハイドレーションを遅延させます。これにより、特に重要でないコンポーネントの場合、初期パフォーマンスコストを大幅に削減できます。

使用方法

可視性戦略

ビューポートでコンポーネントが表示されるとハイドレートします。

<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戦略.

アイドル戦略

ブラウザがアイドル状態のときにコンポーネントをハイドレートします。これは、コンポーネントをできるだけ早くロードする必要があるが、重要なレンダリングパスをブロックしない場合に適しています。

<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戦略.

インタラクション戦略

指定されたインタラクション（例：クリック、マウスオーバー）の後、コンポーネントをハイドレートします。

<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戦略.

メディアクエリ戦略

ウィンドウがメディアクエリに一致するとコンポーネントをハイドレートします。

<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戦略.

時間戦略

指定された遅延（ミリ秒単位）の後、コンポーネントをハイドレートします。

<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戦略

ブール条件に基づいてコンポーネントをハイドレートします。

<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>

ハイドレーションイベントのリッスン

遅延ハイドレーションコンポーネントはすべて、ハイドレートされると@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>

戦略

  • 型: 'visible' | 'idle' | 'interaction' | 'mediaQuery' | 'if' | 'time' | 'never'
  • 必須: true
戦略説明
visibleコンポーネントがビューポートに表示されるとハイドレートします。
idleブラウザがアイドル状態のとき、または遅延後にハイドレートします。
interactionユーザーインタラクション（例：クリック、ホバー）時にハイドレートします。
mediaQuery指定されたメディアクエリ条件が満たされるとハイドレートします。
if指定されたブール条件が満たされるとハイドレートします。
time指定された時間遅延後にハイドレートします。
neverVueがコンポーネントをハイドレートするのを防ぎます。

ソース

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