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>

時間策略適用於可以等待特定時間的元件。

條件策略

根據布林條件注水元件。

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

條件策略最適合可能不需要始終注水的元件。

永不注水

永不注水元件。

<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
策略描述
可見當元件在視口中變得可見時注水。
空閒當瀏覽器空閒時或延遲後注水。
互動在使用者互動（例如，點選、懸停）時注水。
媒體查詢當滿足指定的媒體查詢條件時注水。
條件當滿足指定的布林條件時注水。
時間在指定的延遲時間後注水。
永不阻止 Vue 注水元件。

源

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