You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Suspense is an experimental new feature and the API could change at any time. It is documented here so that the community can provide feedback on the current implementation.
8
+
:::warning 実験的
9
+
Suspense は実験的な新機能であり、 API はいつでも変更される可能性があります。コミュニティが現在の実装についてフィードバックできるように、ここにドキュメント化されています。
10
10
11
-
It should not be used in production applications.
11
+
本番のアプリケーションでは使用しないでください。
12
12
:::
13
13
14
-
## Introduction
14
+
## イントロダクション
15
15
16
-
It is common for components to need to perform some kind of asynchronous request before they can be rendered properly. Components often handle this locally and in many cases that is a perfectly good approach.
The `<suspense>`component provides an alternative, allowing for the waiting to be handled further up the component tree rather than in each individual component.
The `<suspense>`component has two slots. Both slots only allow for one immediate child node. The node in the `default`slot is shown if possible. If not, the node in the `fallback`slot will be shown instead.
Importantly, the async component doesn't need to be the immediate child of the `<suspense>`. It can be at any depth within the component tree and doesn't need to appear in the same template as the `<suspense>`itself. The content is only considered resolved once all descendants are ready.
The other way to trigger the `fallback`slot is for a descendant component to return a promise from its `setup`function. This is typically implemented using `async`rather than explicitly returning a promise:
// Be very careful using `await` inside `setup` as
55
-
// most Composition API functions will only work
56
-
// prior to the first `await`
54
+
// ほとんどの Composition API 関数は、
55
+
// 最初の `await` より前にしか動かないため、
56
+
// `setup` 内で `await` を使用するには十分注意してください。
57
57
const data = await loadData()
58
58
59
-
// This is implicitly wrapped in a promise because
60
-
// the function is `async`
59
+
// この関数は `async` なので、
60
+
// 暗黙的に Promise でラップされています。
61
61
return {
62
62
// ...
63
63
}
64
64
}
65
65
}
66
66
```
67
67
68
-
## Child Updates
68
+
## 子要素の更新
69
69
70
-
Once a `<suspense>`has resolved the contents of its `default`slot, it can only be triggered again if the `default`root node is replaced. New components nested deeper in the tree are not sufficient to move the `<suspense>` back into a pending state.
If the root node does change it will trigger the `pending`event. However, by default, it won't update the DOM to show the `fallback`content. Instead, it will continue to show the old DOM until the new components are ready. This can be controlled using the `timeout`prop. This value, expressed in milliseconds, tells the `<suspense>`component how long to wait before showing the `fallback`. A value of `0`will show it immediately when the `<suspense>`enters the pending state.
72
+
ルート要素が変更されると `pending`イベントが発火します。しかし、デフォルトでは DOM を更新して `fallback`コンテンツを表示することはありません。代わりに、新しいコンポーネントの準備が整うまで、古い DOM を表示し続けます。これは `timeout`プロパティを使って制御できます。このミリ秒単位で表される値は `<suspense>`コンポーネントに `fallback` を表示するまでの待ち時間を伝えます。 値を `0`にすると、 `<suspense>`が pending 状態になったときにすぐ表示されます。
73
73
74
-
## Events
74
+
## イベント
75
75
76
-
In addition to the `pending` event, the `<suspense>`component also has`resolve`and`fallback`events. The `resolve`event is emitted when new content has finished resolving in the `default`slot. The `fallback`event is fired when the contents of the `fallback`slot are shown.
The events could be used, for example, to show a loading indicator in front of the old DOM while new components are loading.
78
+
このイベントは、例えば、新しいコンポーネントを読み込んでいる間、古い DOM の前にローディングインジケータを表示するのに使用することができます。
79
79
80
-
## Combining with Other Components
80
+
## 他のコンポーネントとの組み合わせ
81
81
82
-
It is common to want to use `<suspense>`in combination with the [`<transition>`](/api/built-in-components.html#transition)and[`<keep-alive>`](/api/built-in-components.html#keep-alive)components. The nesting order of these components is important to get them all working correctly.
The following example shows how to nest these components so that they all behave as expected. For simpler combinations you can remove the components that you don't need:
@@ -104,4 +104,4 @@ The following example shows how to nest these components so that they all behave
104
104
</router-view>
105
105
```
106
106
107
-
Vue Router has built-in support for [lazily loading components](https://next.router.vuejs.org/guide/advanced/lazy-loading.html)using dynamic imports. These are distinct from async components and currently they will not trigger `<suspense>`. However, they can still have async components as descendants and those can trigger `<suspense>`in the usual way.
0 commit comments