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/components/async.md
+31-24Lines changed: 31 additions & 24 deletions
Original file line number
Diff line number
Diff line change
@@ -1,24 +1,26 @@
1
-
# Async Components {#async-components}
1
+
# المكونات الغير متزامنة {#async-components}
2
2
3
-
## Basic Usage {#basic-usage}
3
+
## الاستخدام الأساسي {#basic-usage}
4
4
5
-
In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's needed. To make that possible, Vue has a [`defineAsyncComponent`](/api/general.html#defineasynccomponent) function:
5
+
في التطبيقات الكبيرة ، قد نحتاج إلى تقسيم التطبيق إلى أجزاء أصغر وتحميل مكون من الخادم عند الحاجة. لجعل ذلك ممكنًا ، تحتوي Vue على دالة
6
+
[`defineAsyncComponent`](/api/general.html#defineasynccomponent) من أجل إنشاء مكون جديد
6
7
7
8
```js
8
9
import { defineAsyncComponent } from'vue'
9
10
10
11
constAsyncComp=defineAsyncComponent(() => {
11
12
returnnewPromise((resolve, reject) => {
12
-
// ...load component from server
13
-
resolve(/*loaded component*/)
13
+
// ... تحميل المكون من الخادم
14
+
resolve(/*المكون المُحمل*/)
14
15
})
15
16
})
16
-
// ... use `AsyncComp` like a normal component
17
+
// ... استخدم `AsyncComp` مثل مكون عادي
17
18
```
19
+
كما تري , `defineAsyncComponent` يقبل وظيفة أداة التحميل (Loader Function) والتي ترجع وعداً (Promise) . رد الوعد `resolve` يجب استدعائه عندما يتم استرجاع المكون الخاص بك من الخادم . يمكنك ايضاً إستدعاء الرفض `reject(reason)` للإشارة إلي فشل التحميل
18
20
19
-
As you can see, `defineAsyncComponent` accepts a loader function that returns a Promise. The Promise's `resolve` callback should be called when you have retrieved your component definition from the server. You can also call `reject(reason)` to indicate the load has failed.
20
21
21
-
[ES module dynamic import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) also returns a Promise, so most of the time we will use it in combination with `defineAsyncComponent`. Bundlers like Vite and webpack also support the syntax (and will use it as bundle split points), so we can use it to import Vue SFCs:
22
+
[ES module dynamic import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) أيضاً يرجع وعداً (Promise), لذالك سنستحدمه في معظم الأوقات مع `defineAsyncComponent` . تدعم حزم مثل Vite و Webpack البنية أيضًا (وستستخدمها كنقاط تقسيم للحزمة), حتى نتمكن من استخدامه لاستيراد Vue SFCs:
النتيجة `AsyncComp` هو عبارة عن مكون مُغلف يستدعي وظيفة أداة التحميل فقط عندما يتم عرضها فعليًا على الصفحة. بالإضافة إلي ذالك , سيتم تمرير أي الخاصيات (Props) او منافذ (Slots) إلي المكون الداخلي , لذالك يمكنك استخدام الغُلاف غير المتزامن (Async Wrapper) لأستبدال المكون الأب أثناء التحميل البطئ (Lazy Loading) بسلاسة.
33
+
30
34
31
-
The resulting `AsyncComp` is a wrapper component that only calls the loader function when it is actually rendered on the page. In addition, it will pass along any props and slots to the inner component, so you can use the async wrapper to seamlessly replace the original component while achieving lazy loading.
35
+
المكونات الغير متزامنة يمكن ان يتم تسجيلها [بشكل عام](/guide/components/registration.html#global-registration) مثل المكونات العادية , بإستخدام `app.component()`:
32
36
33
-
As with normal components, async components can be [registered globally](/guide/components/registration.html#global-registration) using `app.component()`:
## Loading and Error States {#loading-and-error-states}
88
+
## حالات التحميل و الخطأ {#loading-and-error-states}
86
89
87
-
Asynchronous operations inevitably involve loading and error states - `defineAsyncComponent()` supports handling these states via advanced options:
90
+
تتضمن العمليات غير المتزامنة حتمًا حالات التحميل والخطأ `defineAsyncComponent()`
91
+
يدعم التعامل مع هذه الحالات عبر الخيارات المتقدمة:
88
92
89
93
```js
90
94
constAsyncComp=defineAsyncComponent({
91
-
//the loader function
95
+
//وظيفة أداة التحميل
92
96
loader: () =>import('./Foo.vue'),
93
97
94
-
//A component to use while the async component is loading
98
+
//مكون لكي يتم إستخدامه أثناء تحميل المكون غير المتزامن (Async Component)
95
99
loadingComponent: LoadingComponent,
96
-
// Delay before showing the loading component. Default: 200ms.
100
+
101
+
// التأخير قبل إظهار مكون التحميل. الافتراضي: 200 مللي ثانية.
97
102
delay:200,
98
103
99
-
//A component to use if the load fails
104
+
//مكون لاستخدامه في حالة فشل التحميل
100
105
errorComponent: ErrorComponent,
101
-
//The error component will be displayed if a timeout is
102
-
//provided and exceeded. Default: Infinity.
106
+
//سيتم عرض مكون الخطأ إذا كانت المهلة المقدمة تجاوزت
107
+
//الافتراضي: ما لا نهاية
103
108
timeout:3000
104
109
})
105
110
```
106
111
107
-
If a loading component is provided, it will be displayed first while the inner component is being loaded. There is a default 200ms delay before the loading component is shown - this is because on fast networks, an instant loading state may get replaced too fast and end up looking like a flicker.
112
+
إذا تم توفير مكون التحميل (Loading Component) ، فسيتم عرضه أولاً أثناء تحميل المكون الداخلي. يوجد تأخير افتراضي يبلغ 200 مللي ثانية قبل عرض مكون التحميل - وهذا لأنه في الأنترنت السريع ، قد يتم استبدال حالة التحميل بسرعة كبيرة وينتهي بها الأمر وكأنها وميض.
113
+
114
+
إذا تم توفير مكون خطأ (Error Component)، فسيتم عرضه عند رفض الوعد الذي أرجعته وظيفة أداة التحميل . يمكنك أيضًا تحديد مهلة (Timeout) لعرض مكون الخطأ عندما يستغرق الطلب وقتًا طويلاً.
108
115
109
-
If an error component is provided, it will be displayed when the Promise returned by the loader function is rejected. You can also specify a timeout to show the error component when the request is taking too long.
116
+
## الاستخدام مع Suspense {#using-with-suspense}
110
117
111
-
## Using with Suspense {#using-with-suspense}
118
+
المكونات غير متزامنة يمكن ان تستخدم مع المكون المدمج `<Suspense>` . تم توثيق التفاعل بين
119
+
`<Suspense>` و المكونات الغير متزامنة في [الفصل المخصص `<Suspense>`](/guide/built-ins/suspense.html).
112
120
113
-
Async components can be used with the `<Suspense>` built-in component. The interaction between `<Suspense>` and async components is documented in the [dedicated chapter for `<Suspense>`](/guide/built-ins/suspense.html).
0 commit comments