diff --git a/GLOSSARY.md b/GLOSSARY.md index 4e397311..92f31533 100644 --- a/GLOSSARY.md +++ b/GLOSSARY.md @@ -3,45 +3,54 @@ این فهرستی از ترجمه‌های اصطلاحات فنی است که توسط تیم ترجمه توافق شده است. این فهرست مرجع اولیه اصطلاحات در این سایت است. -| English | فارسی | Confirmation | Description | -|-|-|-|-| -| Property | پراپرتی | pending | -| Object | شی | pending | -| DOM | DOM | pending | -| Vue | Vue | pending | -| Directive | دایرکتیو | pending | -| Hook | هوک | pending | -| attribute | شاخصه، ویژگی، صفت | pending | -| argument | آرگومان | pending | -| binding | اتصال، پیوند | pending | -| component | کامپوننت | pending | -| element | المان، عنصر | pending | -| modifier | پیراینده | pending | -| prop | پراپ | pending | -| template | تمپلیت | pending | -| built-in | داخلی، درونی، نهادینه‌شده | pending | -| accessibility | دسترسی‌پذیری | pending | -| annotation | | pending | -| bus | | pending | -| class | کلاس | pending | -| command line | خط فرمان | pending | -| composable function | | pending | -| Composition API | | pending | -| computed | computed | pending | -| conditional | شرطی | pending | -| container | | pending | -| data | داده | pending | -| debugging | دیباگ کردن | pending | -| deep | عمیق، ژرف | pending | -| dependency | وابستگی | pending | -| emit | انتشار، ارسال | pending | -| endpoint | پایانه | pending | -| event | رویداد | pending | -| expression | عبارت | pending | -| GitHub | گیت‌هاب | pending | -| handle | مدیریت، رسیدگی | pending | -| animation | انیمیشن | pending | -| transition | ترنزیشن ‌| pending | -| state | state | pending | -| mouse | ماوس | pending | +Here is the markdown table sorted alphabetically by the English column: +| English | فارسی | Confirmation | Description | +|-|-|-|-| +| accessibility | دسترسی‌پذیری | pending | | +| animation | انیمیشن | pending | | +| annotation | | pending | | +| argument | آرگومان | pending | | +| async | ناهمگام، غیرهمگام | pending | | +| attribute | شاخصه، ویژگی، صفت | pending | | +| binding | اتصال، پیوند | pending | | +| built-in | داخلی، درونی، نهادینه‌شده | pending | | +| bus | | pending | | +| class | کلاس | pending | | +| command line | خط فرمان | pending | | +| component | کامپوننت | pending | | +| composable function | | pending | | +| Composition API | | pending | | +| computed | computed | pending | | +| conditional | شرطی | pending | | +| container | | pending | | +| data | داده | pending | | +| debugging | دیباگ کردن | pending | | +| deep | عمیق، ژرف | pending | | +| delay | تاخیر | pending | | +| dependency | وابستگی | pending | | +| directive | دایرکتیو | pending | | +| DOM | DOM | pending | | +| element | المان، عنصر | pending | | +| emit | انتشار، ارسال | pending | | +| endpoint | پایانه | pending | | +| event | رویداد | pending | | +| expression | عبارت | pending | | +| GitHub | گیت‌هاب | pending | | +| handle | مدیریت، رسیدگی | pending | | +| hook | هوک | pending | | +| Lazy Loading | بارگذاری تنبل | pending | | +| load | بارگذاری | pending | | +| loader | بارگذار | pending | | +| modifier | پیراینده | pending | | +| mouse | ماوس | pending | | +| Object | شی | pending | | +| prop | پراپ | pending | | +| Property | پراپرتی | pending | | +| seamlessly | یکپارچه | pending | | +| state | state | pending | | +| template | تمپلیت | pending | | +| timeout | تایم‌اوت | pending | | +| transition | ترنزیشن‌ | pending | | +| Vue | Vue | pending | | +| wrapper | پوششی، دربرگیرنده | pending | | diff --git a/src/guide/components/async.md b/src/guide/components/async.md index 4927549f..1a2d0f82 100644 --- a/src/guide/components/async.md +++ b/src/guide/components/async.md @@ -1,8 +1,8 @@ -# Async Components {#async-components} +# کامپوننت‌های غیرهمگام {#async-components} -## Basic Usage {#basic-usage} +## کاربرد اصلی {#basic-usage} -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#defineasynccomponent) function: +در برنامه‌های بزرگ، ممکن است لازم باشد برنامه را به تکه‌های کوچکتر تقسیم کنیم و فقط در هنگام نیاز به یک کامپوننت، آن را از سرور بارگذاری کنیم. در Vue تابع [`defineAsyncComponent`](/api/general#defineasynccomponent) این خواسته را محقق می‌سازد: ```js import { defineAsyncComponent } from 'vue' @@ -16,9 +16,10 @@ const AsyncComp = defineAsyncComponent(() => { // ... use `AsyncComp` like a normal component ``` -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. +همانطور که می‌بینید، `defineAsyncComponent` یک تابع بارگذار (loader) را می‌پذیرد که یک Promise را برمی‌گرداند. هنگامی که تعریف کامپوننت شما از سرور دریافت شد، تابع `resolve` در Promise بازگشتی، باید فراخوانی شود. همچنین می‌توانید با فراخوانی `reject(reason)` نشان دهید بارگذاری شکست خورده است. + +استفاده از [import پویای ماژول ES](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) نیز یک Promise را برمی‌گرداند، بنابراین بیشتر اوقات از آن در ترکیب با `defineAsyncComponent` استفاده می‌کنیم. باندلرهایی مانند Vite و webpack نیز از این ترکیب پشتیبانی می‌کنند (و از آن به عنوان نقاط تقسیم باندل استفاده می‌کنند)، بنابراین می‌توانیم از آن برای import کردن Vue SFC استفاده کنیم: -[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: ```js import { defineAsyncComponent } from 'vue' @@ -28,9 +29,10 @@ const AsyncComp = defineAsyncComponent(() => ) ``` -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. -As with normal components, async components can be [registered globally](/guide/components/registration#global-registration) using `app.component()`: +کامپوننت `AsyncComp` حاصل از این فرایند، یک کامپوننتِ پوششی (Wrapper) است که تابع بارگذار (loader) را تنها زمانی فراخوانی می کند که کامپوننتِ داخلی آن در صفحه رندر شده باشد. علاوه بر این، AsyncComp هرگونه پراپ (Prop) و اسلات (Slot) را به کامپوننت داخلی پاس می‌دهد، بنابراین می‌توانید از این پوششیِ ناهمگام (Async Wrapper) برای جایگزینیِ یکپارچه با کامپوننتِ اصلی در حالی که بارگذاریِ تنبل (Lazy Loading) را نیز به دست می‌آورید، استفاده کنید. + +همانند کامپوننت‌های عادی، کامپوننت‌های ناهمگام را می‌توان با استفاده از `()app.component` [به طور سراسری ثبت کرد:](/guide/components/registration#global-registration) ```js app.component('MyComponent', defineAsyncComponent(() => @@ -40,7 +42,7 @@ app.component('MyComponent', defineAsyncComponent(() =>
-You can also use `defineAsyncComponent` when [registering a component locally](/guide/components/registration#local-registration): +همچنین می‌توانید از `defineAsyncComponent` هنگام [ثبت محلی یک کامپوننت](/guide/components/registration#local-registration) استفاده کنید: ```vue