From 32b606ca387b1f80b5c5acb6df628469ff094a32 Mon Sep 17 00:00:00 2001 From: Hikaru Kobayashi Date: Thu, 5 Sep 2024 22:45:46 +0900 Subject: [PATCH 1/7] 3.5: lazy hydration --- src/guide/components/async.md | 99 +++++++++++++++++++++++++++++++++++ 1 file changed, 99 insertions(+) diff --git a/src/guide/components/async.md b/src/guide/components/async.md index 29ac86883..b81d553e9 100644 --- a/src/guide/components/async.md +++ b/src/guide/components/async.md @@ -108,6 +108,105 @@ const AsyncComp = defineAsyncComponent({ エラーコンポーネントが与えられた場合、ローダー関数から返された Promise が reject されたときに表示されます。リクエストが長すぎる場合にエラーコンポーネントを表示するために、timeout を指定することもできます。 +## 遅延ハイドレーション {#lazy-hydration} + +> このセクションは[サーバーサイドレンダリング](/guide/scaling-up/ssr)を使用している場合のみ適用されます。 + +Vue 3.5 以降では、非同期コンポーネントはハイドレーション戦略を提供することでいつハイドレートされるかを制御できます。 + +- Vue は複数のビルトインのハイドレーション戦略を提供しています。これらのビルトイン戦略は使用されていない場合にツリーシェイキングするために個別にインポートする必要があります。 + +- 柔軟性を持たせるために設計は意図的に低レベルになっています。コンパイラーのシンタックスシュガー（糖衣構文）は将来的にこれに基づいてコアまたは高レベルのソリューション（例： Nuxt）で構築される可能性があります。 + +### アイドル状態でハイドレート + +`requestIdleCallback` を使用してハイドレートします: + +```js +import { defineAsyncComponent, hydrateOnIdle } from 'vue' + +const AsyncComp = defineAsyncComponent({ + loader: () => import('./Comp.vue'), + hydrate: hydrateOnIdle(/* オプションでタイムアウトの上限を渡すことができます */) +}) +``` + +### 表示時にハイドレート + +`IntersectionObserver` を使用して要素が表示されたときにハイドレートします。 + +```js +import { defineAsyncComponent, hydrateOnVisible } from 'vue' + +const AsyncComp = defineAsyncComponent({ + loader: () => import('./Comp.vue'), + hydrate: hydrateOnVisible() +}) +``` + +オブザーバーに対してオプションのオブジェクト値を渡すことができます: + +```js +hydrateOnVisible({ rootMargin: '100px' }) +``` + +### メディアクエリーでハイドレート + +指定されたメディアクエリーに一致したときにハイドレートします。 + +```js +import { defineAsyncComponent, hydrateOnMediaQuery } from 'vue' + +const AsyncComp = defineAsyncComponent({ + loader: () => import('./Comp.vue'), + hydrate: hydrateOnMediaQuery('(max-width:500px)') +}) +``` + +### インタラクションでハイドレート + +コンポーネント要素に指定されたイベントがトリガーされたときにハイドレートします。ハイドレーションがトリガーされたイベントもハイドレーションが一度完了すると再生されます。 + +```js +import { defineAsyncComponent, hydrateOnInteraction } from 'vue' + +const AsyncComp = defineAsyncComponent({ + loader: () => import('./Comp.vue'), + hydrate: hydrateOnInteraction('click') +}) +``` + +複数のイベントタイプをリストにすることもできます: + +```js +hydrateOnInteraction(['wheel', 'mouseover']) +``` + +### カスタム戦略 + +```ts +import { defineAsyncComponent, type HydrationStrategy } from 'vue' + +const myStrategy: HydrationStrategy = (hydrate, forEachElement) => { + // forEachElement は全てのルート要素を反復処理するためのヘルパーです + // ハイドレートされていない DOM の中では、ルート要素がフラグメントである可能性があるためです + // 単一の要素の代わりに + forEachElement(el => { + // ... + }) + // 準備が整ったときに `hydrate` を呼び出します + hydrate() + return () => { + // 必要に応じて破棄する関数を返します + } +} + +const AsyncComp = defineAsyncComponent({ + loader: () => import('./Comp.vue'), + hydrate: myStrategy +}) +``` + ## Suspense での使用 {#using-with-suspense} 非同期コンポーネントは、ビルトインコンポーネント `` と使用することもできます。`` と非同期コンポーネント間のインタラクションについては、[`` のページ](/guide/built-ins/suspense) にドキュメントがあります。 From 2823db1c4b19d46e19584e7c3576fc809b87e323 Mon Sep 17 00:00:00 2001 From: Hikaru Kobayashi <164742050+splendente@users.noreply.github.com> Date: Thu, 5 Sep 2024 23:46:18 +0900 Subject: [PATCH 2/7] Update src/guide/components/async.md Co-authored-by: Jun Shindo <46585162+jay-es@users.noreply.github.com> --- src/guide/components/async.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/components/async.md b/src/guide/components/async.md index b81d553e9..0b1e01547 100644 --- a/src/guide/components/async.md +++ b/src/guide/components/async.md @@ -127,7 +127,7 @@ import { defineAsyncComponent, hydrateOnIdle } from 'vue' const AsyncComp = defineAsyncComponent({ loader: () => import('./Comp.vue'), - hydrate: hydrateOnIdle(/* オプションでタイムアウトの上限を渡すことができます */) + hydrate: hydrateOnIdle(/* タイムアウトの上限を渡すこともできます（省略可能） */) }) ``` From c094a512722364394ab4afd11ab5a7ca352730d4 Mon Sep 17 00:00:00 2001 From: Hikaru Kobayashi <164742050+splendente@users.noreply.github.com> Date: Thu, 5 Sep 2024 23:49:38 +0900 Subject: [PATCH 3/7] Update src/guide/components/async.md Co-authored-by: Jun Shindo <46585162+jay-es@users.noreply.github.com> --- src/guide/components/async.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/components/async.md b/src/guide/components/async.md index 0b1e01547..b9ff0319f 100644 --- a/src/guide/components/async.md +++ b/src/guide/components/async.md @@ -116,7 +116,7 @@ Vue 3.5 以降では、非同期コンポーネントはハイドレーション - Vue は複数のビルトインのハイドレーション戦略を提供しています。これらのビルトイン戦略は使用されていない場合にツリーシェイキングするために個別にインポートする必要があります。 -- 柔軟性を持たせるために設計は意図的に低レベルになっています。コンパイラーのシンタックスシュガー（糖衣構文）は将来的にこれに基づいてコアまたは高レベルのソリューション（例： Nuxt）で構築される可能性があります。 +- 柔軟性を持たせるために設計は意図的に低レベルになっています。将来的にコアまたは高レベルのソリューション（例： Nuxt）で、コンパイラーのシンタックスシュガー（糖衣構文）がこれに基づいて構築される可能性があります。 ### アイドル状態でハイドレート From e6401c4cf38eabcbb1a645d5c89c23c43fc9803d Mon Sep 17 00:00:00 2001 From: Hikaru Kobayashi <164742050+splendente@users.noreply.github.com> Date: Thu, 5 Sep 2024 23:58:34 +0900 Subject: [PATCH 4/7] Update src/guide/components/async.md Co-authored-by: Jun Shindo <46585162+jay-es@users.noreply.github.com> --- src/guide/components/async.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/components/async.md b/src/guide/components/async.md index b9ff0319f..bc7f71268 100644 --- a/src/guide/components/async.md +++ b/src/guide/components/async.md @@ -197,7 +197,7 @@ const myStrategy: HydrationStrategy = (hydrate, forEachElement) => { // 準備が整ったときに `hydrate` を呼び出します hydrate() return () => { - // 必要に応じて破棄する関数を返します + // 必要であれば、後処理（teardown）の関数を返します } } From 0cae976de2c9a17fde628ad62f9e9662dbee245e Mon Sep 17 00:00:00 2001 From: Hikaru Kobayashi <164742050+splendente@users.noreply.github.com> Date: Fri, 6 Sep 2024 00:07:33 +0900 Subject: [PATCH 5/7] Update src/guide/components/async.md Co-authored-by: Jun Shindo <46585162+jay-es@users.noreply.github.com> --- src/guide/components/async.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/guide/components/async.md b/src/guide/components/async.md index bc7f71268..e76d3c461 100644 --- a/src/guide/components/async.md +++ b/src/guide/components/async.md @@ -188,9 +188,9 @@ hydrateOnInteraction(['wheel', 'mouseover']) import { defineAsyncComponent, type HydrationStrategy } from 'vue' const myStrategy: HydrationStrategy = (hydrate, forEachElement) => { - // forEachElement は全てのルート要素を反復処理するためのヘルパーです - // ハイドレートされていない DOM の中では、ルート要素がフラグメントである可能性があるためです - // 単一の要素の代わりに + // forEachElement はコンポーネントのハイドレートされていない DOM の中にある + // 全てのルート要素を反復処理するためのヘルパーです。ルート要素は単一の要素ではなく + // フラグメントである可能性があるためです forEachElement(el => { // ... }) From 14b560a5b94eb37f072640f47abf6ff523bee30d Mon Sep 17 00:00:00 2001 From: Hikaru Kobayashi Date: Fri, 6 Sep 2024 00:10:45 +0900 Subject: [PATCH 6/7] fix: add supplement --- src/guide/components/async.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/components/async.md b/src/guide/components/async.md index e76d3c461..8344deb0a 100644 --- a/src/guide/components/async.md +++ b/src/guide/components/async.md @@ -144,7 +144,7 @@ const AsyncComp = defineAsyncComponent({ }) ``` -オブザーバーに対してオプションのオブジェクト値を渡すことができます: +オブザーバーに対してオブジェクト値を渡すことができます（省略可能）: ```js hydrateOnVisible({ rootMargin: '100px' }) From e03f275f7dccef3b40d115bc1a0277d07217e380 Mon Sep 17 00:00:00 2001 From: Hikaru Kobayashi <164742050+splendente@users.noreply.github.com> Date: Fri, 6 Sep 2024 00:23:18 +0900 Subject: [PATCH 7/7] Update src/guide/components/async.md Co-authored-by: Jun Shindo <46585162+jay-es@users.noreply.github.com> --- src/guide/components/async.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/guide/components/async.md b/src/guide/components/async.md index 8344deb0a..fd897d3b1 100644 --- a/src/guide/components/async.md +++ b/src/guide/components/async.md @@ -165,7 +165,7 @@ const AsyncComp = defineAsyncComponent({ ### インタラクションでハイドレート -コンポーネント要素に指定されたイベントがトリガーされたときにハイドレートします。ハイドレーションがトリガーされたイベントもハイドレーションが一度完了すると再生されます。 +コンポーネント要素に指定されたイベントがトリガーされたときにハイドレートします。ハイドレーションが完了すると、ハイドレーションをトリガーしたイベントも再生されます。 ```js import { defineAsyncComponent, hydrateOnInteraction } from 'vue'