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
Copy file name to clipboardExpand all lines: src/guide/built-ins/suspense.md
+38-40Lines changed: 38 additions & 40 deletions
Original file line number
Diff line number
Diff line change
@@ -2,41 +2,41 @@
2
2
outline: deep
3
3
---
4
4
5
-
# Suspense {#suspense}
5
+
# مكون Suspense {#suspense}
6
6
7
-
:::warning Experimental Feature
8
-
`<Suspense>`is an experimental feature. It is not guaranteed to reach stable status and the API may change before it does.
7
+
:::warning ميزة تجريبية
8
+
`<Suspense>`هي ميزة تجريبية. لا يتم ضمان الوصول إلى حالة مستقرة وقد تتغير واجهتها البرمجية قبل ذلك.
9
9
:::
10
10
11
-
`<Suspense>`is a built-in component for orchestrating async dependencies in a component tree. It can render a loading state while waiting for multiple nested async dependencies down the component tree to be resolved.
11
+
`<Suspense>`هو مكون مدمج لتنظيم الاعتماديات اللاتزامنية في شجرة المكونات. يمكنه تصيير حالة التحميل أثناء انتظار تحميل عدة اعتماديات لاتزامنية متداخلة في شجرة المكونات.
12
12
13
-
## Async Dependencies {#async-dependencies}
13
+
## الاعتماديات اللاتزامنية {#async-dependencies}
14
14
15
-
To explain the problem `<Suspense>`is trying to solve and how it interacts with these async dependencies, let's imagine a component hierarchy like the following:
15
+
لشرح المشكلة التي يحاول حلها `<Suspense>`وكيفية تفاعله مع هذه الاعتماديات اللاتزامنية ، فلنتخيل هيكلية مكونات كالتالي:
16
16
17
17
```
18
18
<Suspense>
19
19
└─ <Dashboard>
20
20
├─ <Profile>
21
-
│ └─ <FriendStatus> (component with async setup())
21
+
│ └─ <FriendStatus> (مكون مع async setup())
22
22
└─ <Content>
23
23
├─ <ActivityFeed> (async component)
24
24
└─ <Stats> (async component)
25
25
```
26
26
27
-
In the component tree there are multiple nested components whose rendering depends on some async resource to be resolved first. Without`<Suspense>`, each of them will need to handle its own loading / error and loaded states. In the worst case scenario, we may see three loading spinners on the page, with content displayed at different times.
27
+
في شجرة المكونات ، هناك عدة مكونات متداخلة التي تعتمد على تحميل بعض الموارد اللاتزامنية أولاً. بدون`<Suspense>` ، سيحتاج كل منهم إلى معالجة الحالة أثناء تحميله / خطأه والحالة بعد تحميله. في أسوأ سيناريو، قد نرى ثلاثة عجلات تحميل على الصفحة، مع عرض المحتوى في أوقات مختلفة.
28
28
29
-
The `<Suspense>`component gives us the ability to display top-level loading / error states while we wait on these nested async dependencies to be resolved.
29
+
يمنحنا مكون `<Suspense>`القدرة على عرض حالات التحميل / الخطأ على المستوى الأعلى أثناء انتظار تحميل هذه الاعتماديات اللاتزامنية المتداخلة.
30
30
31
-
There are two types of async dependencies that`<Suspense>`can wait on:
31
+
هناك نوعان من الاعتماديات اللاتزامنية التي يمكن لـ`<Suspense>`انتظارهما:
32
32
33
-
1.Components with an async `setup()` hook. This includes components using `<script setup>`with top-level`await`expressions.
33
+
1.المكونات التي تحتوي على `()setup` لاتزامني. يشمل ذلك المكونات التي تستخدم `<script setup>`مع التعبيرات`await`على المستوى الأعلى.
Async components are**"suspensible"**by default. This means that if it has a `<Suspense>`in the parent chain, it will be treated as an async dependency of that `<Suspense>`. In this case, the loading state will be controlled by the `<Suspense>`, and the component's own loading, error, delay and timeout options will be ignored.
68
+
المكونات اللاتزامنية هي** "قابلة للتعليق" **افتراضيًا. وهذا يعني أنه إذا كان لديه `<Suspense>`في سلسلة المكونات الأباء ، فسيعامل كاعتمادية لاتزامنية لـذلك `<Suspense>` . في هذه الحالة ، سيُتحكم في حالة التحميل من قبل `<Suspense>` ، وستُتجاهل خيارات تحميل المكون ، وخطأه ، وتأخيره ومهلته.
69
69
70
-
The async component can opt-out of `Suspense` control and let the component always control its own loadingstate by specifying `suspensible: false` in its options.
70
+
## حالة التحميل {#loading-state}
71
71
72
-
## Loading State {#loading-state}
73
-
74
-
The `<Suspense>` component has two slots: `#default` and `#fallback`. 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.
72
+
المكون `<Suspense>` لديه منفذين: `default#` و `fallback#`. يسمح كلا المنفذين بعنصر ابن مباشر **واحد** فقط. يُعرض العنصر في المنفذ الافتراضي إذا كان ذلك ممكنًا. إذا لم يكن ذلك ممكنًا ، سيُعرض العنصر في منفذ الاحتياط بدلاً من ذلك.
75
73
76
74
```vue-html
77
75
<Suspense>
78
-
<!-- component with nested async dependencies -->
76
+
<!-- مكون مع اعتماديات لاتزامنية متداخلة -->
79
77
<Dashboard />
80
78
81
-
<!-- loading state via #fallback slot -->
79
+
<!-- حالة التحميل عبر منفذ الاحتياط -->
82
80
<template #fallback>
83
-
Loading...
81
+
تحميل...
84
82
</template>
85
83
</Suspense>
86
84
```
87
85
88
-
On initial render, `<Suspense>`will render its default slot content in memory. If any async dependencies are encountered during the process, it will enter a **pending** state. During the pending state, the fallback content will be displayed. When all encountered async dependencies have been resolved, `<Suspense>`enters a **resolved**state and the resolved default slot content is displayed.
86
+
عند التصيير الأولي ، سيقوم `<Suspense>`بتصيير محتوى منفذه الافتراضي في الذاكرة. إذا عُثر على أي اعتماديات لاتزامنية أثناء العملية، سيدخل حالة **انتظار**. خلال هذه الحالة، سيُعرض المحتوى الاحتياطي. عندما تُحمل جميع الاعتماديات اللاتزامنية التي عُثر عليها ، سيدخل `<Suspense>`حالة **محلولة**وسيُعرض محتوى المنفذ الافتراضي المحلول.
89
87
90
-
If no async dependencies were encountered during the initial render,`<Suspense>`will directly go into a resolved state.
88
+
إذا لم يُعثر على اعتماديات لاتزامنية أثناء التصيير الأولي، سيذهب`<Suspense>`مباشرة إلى حالة محلولة.
91
89
92
-
Once in a resolved state, `<Suspense>`will only revert to a pending state if the root node of the `#default` slot is replaced. New async dependencies nested deeper in the tree will **not** cause the`<Suspense>`to revert to a pending state.
90
+
بمجرد الوصول إلى الحالة المحلولة ، سيعود `<Suspense>`إلى حالة الانتظار فقط إذا استبدل العنصر الجذري في المنفذ `default#` . لن تؤدي اعتماديات لاتزامنية جديدة متداخلة بشكل أعمق في الشجرة إلى إعادة`<Suspense>`إلى حالة الانتظار.
93
91
94
-
When a revert happens, fallback content will not be immediately displayed. Instead, `<Suspense>`will display the previous `#default` content while waiting for the new content and its async dependencies to be resolved. This behavior can be configured with the `timeout`prop: `<Suspense>`will switch to fallback content if it takes longer than `timeout`to render the new default content. A `timeout` value of `0` will cause the fallback content to be displayed immediately when default content is replaced.
92
+
عندما تحدث الإعادة، لن يُعرض المحتوى الاحتياطي على الفور. بدلاً من ذلك ، سيعرض `<Suspense>`المحتوى الافتراضي السابق أثناء الانتظار لتصيير المحتوى الافتراضي الجديد واعتمادياته اللاتزامنية. يمكن تكوين هذا السلوك باستخدام خاصية `timeout`المتوفرة: `<Suspense>`سيتغير إلى المحتوى الاحتياطي إذا استغرق أكثر من الزمن المحدد في `timeout`لتصيير المحتوى الافتراضي الجديد. ستؤدي القيمة `0` لـ`timeout` إلى عرض المحتوى الاحتياطي على الفور عند استبدال المحتوى الافتراضي.
95
93
96
-
## Events {#events}
94
+
## الأحداث {#events}
97
95
98
-
The`<Suspense>`component emits 3 events: `pending`, `resolve`and`fallback`. The `pending`event occurs when entering a pending state. 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.
96
+
المكون`<Suspense>`يُصدر 3 أحداث: `pending` ، `resolve`و`fallback`. يشتغل الحدث `pending`عند دخول حالة الانتظار. يُرسل الحدث `resolve`عندما يُنتهى من تحليل المحتوى الجديد في المنفذ `default`. يُطلق الحدث `fallback`عندما تُعرض محتويات منفذ `fallback`.
99
97
100
-
The events could be used, for example, to show a loading indicator in front of the old DOM while new components are loading.
98
+
الأحداث يمكن استخدامها، على سبيل المثال، لإظهار مؤشر تحميل على الـDOM القديم أثناء تحميل المكونات الجديدة.
101
99
102
-
## Error Handling {#error-handling}
100
+
## معالجة الأحداث {#error-handling}
103
101
104
-
`<Suspense>`currently does not provide error handling via the component itself - however, you can use the [`errorCaptured`](/api/options-lifecycle.html#errorcaptured)option or the [`onErrorCaptured()`](/api/composition-api-lifecycle.html#onerrorcaptured)hook to capture and handle async errors in the parent component of`<Suspense>`.
102
+
`<Suspense>`لا يوفر حاليًا معالجة الأخطاء عبر المكون نفسه - ومع ذلك ، يمكنك استخدام خيار [`errorCaptured`](/api/options-lifecycle.html#errorcaptured)أو [`()onErrorCaptured`](/api/composition-api-lifecycle.html#onerrorcaptured)لالتقاط ومعالجة الأخطاء اللاتزامنية في المكون الأب لـ`<Suspense>`.
105
103
106
-
## Combining with Other Components {#combining-with-other-components}
104
+
## الدمج مع مكونات أخرى {#combining-with-other-components}
107
105
108
-
It is common to want to use `<Suspense>`in combination with the [`<Transition>`](./transition)and[`<KeepAlive>`](./keep-alive) components. The nesting order of these components is important to get them all working correctly.
106
+
من الشائع أن ترغب في استخدام `<Suspense>`بالتزامن مع مكونات [`<Transition>`](./transition)و[`<KeepAlive>`](./keep-alive). ترتيب التداخل لهذه المكونات مهم جدا للحصول على اشتغالها بشكل صحيح.
109
107
110
-
In addition, these components are often used in conjunction with the `<RouterView>`component from[Vue Router](https://router.vuejs.org/).
108
+
بالإضافة إلى ذلك ، تُستخدم هذه المكونات بالتزامن مع المكون `<RouterView>`من[Vue Router](https://router.vuejs.org/).
111
109
112
-
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:
110
+
المثال التالي يوضح كيفية التداخل بين هذه المكونات حتى تتصرف كل منها كما هو متوقع. للتركيبات الأكثر بساطة ، يمكنك إزالة المكونات التي لا تحتاج إليها:
113
111
114
112
```vue-html
115
113
<RouterView v-slot="{ Component }">
116
114
<template v-if="Component">
117
115
<Transition mode="out-in">
118
116
<KeepAlive>
119
117
<Suspense>
120
-
<!-- main content -->
118
+
<!-- المحتوى الرئيسي -->
121
119
<component :is="Component"></component>
122
120
123
-
<!-- loading state -->
121
+
<!-- حالة التحميل -->
124
122
<template #fallback>
125
123
Loading...
126
124
</template>
@@ -131,4 +129,4 @@ The following example shows how to nest these components so that they all behave
131
129
</RouterView>
132
130
```
133
131
134
-
Vue Router has built-in support for [lazily loading components](https://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.
132
+
يحتوي Vue Router على دعم داخلي لـ[تحميل المكونات بطريقة خاملة](https://router.vuejs.org/guide/advanced/lazy-loading.html)باستخدام استيرادات ديناميكية. هذه مختلفة عن المكونات اللاتزامنية وحاليًا لن تتسبب في تشغيل `<Suspense>` . ومع ذلك ، لا يزال بإمكانهم الحصول على مكونات غير متزامنة كأبتاء ويمكن لتلك العناصر تشغيل `<Suspense>`بالطريقة المعتادة.
0 commit comments