From beada37701de981b9d8adebb359bd6278fd36821 Mon Sep 17 00:00:00 2001
From: gisu nasrollahi <113020788+gisuNasr@users.noreply.github.com>
Date: Thu, 5 Oct 2023 12:00:29 +0330
Subject: [PATCH] feat: translate guide/built-ins/[keep-alive, suspense,
 teleport] (#33)

* suspence section needs a quik review

* suspense translated

* teleport section translated

* keepAlive translation is done
---
 src/guide/built-ins/keep-alive.md | 45 ++++++++++---------
 src/guide/built-ins/suspense.md   | 75 +++++++++++++++----------------
 src/guide/built-ins/teleport.md   | 59 ++++++++++++------------
 3 files changed, 90 insertions(+), 89 deletions(-)

diff --git a/src/guide/built-ins/keep-alive.md b/src/guide/built-ins/keep-alive.md
index c4fbec72..1ecced9a 100644
--- a/src/guide/built-ins/keep-alive.md
+++ b/src/guide/built-ins/keep-alive.md
@@ -4,25 +4,25 @@ import SwitchComponent from './keep-alive-demos/SwitchComponent.vue'
 
 # KeepAlive {#keepalive}
 
-`<KeepAlive>` is a built-in component that allows us to conditionally cache component instances when dynamically switching between multiple components.
+`<KeepAlive>` یک کامپوننت داخلی است که به ما امکان می‌دهد وقتی که بین چند کامپوننت به صورت پویا جابجا می‌شویم،  نمونه‌های کامپوننت را به صورت شرطی در حافظه کش کنیم.
 
-## Basic Usage {#basic-usage}
+## استفاده پایه {#basic-usage}
 
-In the Component Basics chapter, we introduced the syntax for [Dynamic Components](/guide/essentials/component-basics#dynamic-components), using the `<component>` special element:
+در فصل مبانی کامپوننت، ما دستورات مربوط به [کامپوننت‌های پویا](/guide/essentials/component-basics#dynamic-components) را با استفاده از عنصر ویژه `<component>` معرفی کردیم:
 
 ```vue-html
 <component :is="activeComponent" />
 ```
 
-By default, an active component instance will be unmounted when switching away from it. This will cause any changed state it holds to be lost. When this component is displayed again, a new instance will be created with only the initial state.
+به طور پیش‌فرض، نمونه‌ی فعال کامپوننت پس از جابجا شدن از آن، unmount می‌شود و هر تغییری که در وضعیت آن اعمال شده است، از دست می‌رود. وقتی این کامپوننت دوباره نمایش داده می‌شود، یک نمونه‌ی جدید با وضعیت اولیه ایجاد می‌شود.
 
-In the example below, we have two stateful components - A contains a counter, while B contains a message synced with an input via `v-model`. Try updating the state of one of them, switch away, and then switch back to it:
+در مثال زیر، دو کامپوننت وجود دارد. کامپوننت A شامل یک شمارنده است، در حالی که کامپوننت B شامل یک پیام است. تلاش کنید وضعیت یکی از آنها را تغییر دهید، به کامپوننت دیگر بروید و سپس دوباره به قبلی برگردید:
 
 <SwitchComponent />
 
-You'll notice that when switched back, the previous changed state would have been reset.
+متوجه خواهید شد که وقتی به آن باز می‌گردید، وضعیتی که قبلاً تغییر کرده بود، دوباره بازنشانی می‌شود.
 
-Creating fresh component instance on switch is normally useful behavior, but in this case, we'd really like the two component instances to be preserved even when they are inactive. To solve this problem, we can wrap our dynamic component with the `<KeepAlive>` built-in component:
+ایجاد نمونه‌ی جدیدی از کامپوننت هنگام جابجایی ، به صورت عادی رفتار مفیدی است اما در این مورد، می‌خواهیم که هر دو نمونه‌ی کامپوننت حتی زمانی که غیرفعال هستند حفظ شوند. برای حل این مشکل، می‌توانیم کامپوننت خود را با کامپوننت داخلی `<KeepAlive>` محاصره کنیم:
 
 ```vue-html
 <!-- Inactive components will be cached! -->
@@ -31,23 +31,24 @@ Creating fresh component instance on switch is normally useful behavior, but in
 </KeepAlive>
 ```
 
-Now, the state will be persisted across component switches:
+حالا، داده ها در جابه جایی بین کامپوننت‌ها حفظ خواهد شد:
+
 
 <SwitchComponent use-KeepAlive />
 
 <div class="composition-api">
 
-[Try it in the Playground](https://play.vuejs.org/#eNqtUsFOwzAM/RWrl4IGC+cqq2h3RFw495K12YhIk6hJi1DVf8dJSllBaAJxi+2XZz8/j0lhzHboeZIl1NadMA4sd73JKyVaozsHI9hnJqV+feJHmODY6RZS/JEuiL1uTTEXtiREnnINKFeAcgZUqtbKOqj7ruPKwe6s2VVguq4UJXEynAkDx1sjmeMYAdBGDFBLZu2uShre6ioJeaxIduAyp0KZ3oF7MxwRHWsEQmC4bXXDJWbmxpjLBiZ7DwptMUFyKCiJNP/BWUbO8gvnA+emkGKIgkKqRrRWfh+Z8MIWwpySpfbxn6wJKMGV4IuSs0UlN1HVJae7bxYvBuk+2IOIq7sLnph8P9u5DJv5VfpWWLaGqTzwZTCOM/M0IaMvBMihd04ruK+lqF/8Ajxms8EFbCiJxR8khsP6ncQosLWnWV6a/kUf2nqu75Fby04chA0iPftaYryhz6NBRLjdtajpHZTWPio=)
+[امتحان کنید](https://play.vuejs.org/#eNqtUsFOwzAM/RWrl4IGC+cqq2h3RFw495K12YhIk6hJi1DVf8dJSllBaAJxi+2XZz8/j0lhzHboeZIl1NadMA4sd73JKyVaozsHI9hnJqV+feJHmODY6RZS/JEuiL1uTTEXtiREnnINKFeAcgZUqtbKOqj7ruPKwe6s2VVguq4UJXEynAkDx1sjmeMYAdBGDFBLZu2uShre6ioJeaxIduAyp0KZ3oF7MxwRHWsEQmC4bXXDJWbmxpjLBiZ7DwptMUFyKCiJNP/BWUbO8gvnA+emkGKIgkKqRrRWfh+Z8MIWwpySpfbxn6wJKMGV4IuSs0UlN1HVJae7bxYvBuk+2IOIq7sLnph8P9u5DJv5VfpWWLaGqTzwZTCOM/M0IaMvBMihd04ruK+lqF/8Ajxms8EFbCiJxR8khsP6ncQosLWnWV6a/kUf2nqu75Fby04chA0iPftaYryhz6NBRLjdtajpHZTWPio=)
 
 </div>
 <div class="options-api">
 
-[Try it in the Playground](https://play.vuejs.org/#eNqtU8tugzAQ/JUVl7RKWveMXFTIseofcHHAiawasPxArRD/3rVNSEhbpVUrIWB3x7PM7jAkuVL3veNJmlBTaaFsVraiUZ22sO0alcNedw2s7kmIPHS1ABQLQDEBAMqWvwVQzffMSQuDz1aI6VreWpPCEBtsJppx4wE1s+zmNoIBNLdOt8cIjzut8XAKq3A0NAIY/QNveFEyi8DA8kZJZjlGALQWPVSSGfNYJjVvujIJeaxItuMyo6JVzoJ9VxwRmtUCIdDfNV3NJWam5j7HpPOY8BEYkwxySiLLP1AWkbK4oHzmXOVS9FFOSM3jhFR4WTNfRslcO54nSwJKcCD4RsnZmJJNFPXJEl8t88quOuc39fCrHalsGyWcnJL62apYNoq12UQ8DLEFjCMy+kKA7Jy1XQtPlRTVqx+Jx6zXOJI1JbH4jejg3T+KbswBzXnFlz9Tjes/V/3CjWEHDsL/OYNvdCE8Wu3kLUQEhy+ljh+brFFu)
+[امتحان کنید](https://play.vuejs.org/#eNqtU8tugzAQ/JUVl7RKWveMXFTIseofcHHAiawasPxArRD/3rVNSEhbpVUrIWB3x7PM7jAkuVL3veNJmlBTaaFsVraiUZ22sO0alcNedw2s7kmIPHS1ABQLQDEBAMqWvwVQzffMSQuDz1aI6VreWpPCEBtsJppx4wE1s+zmNoIBNLdOt8cIjzut8XAKq3A0NAIY/QNveFEyi8DA8kZJZjlGALQWPVSSGfNYJjVvujIJeaxItuMyo6JVzoJ9VxwRmtUCIdDfNV3NJWam5j7HpPOY8BEYkwxySiLLP1AWkbK4oHzmXOVS9FFOSM3jhFR4WTNfRslcO54nSwJKcCD4RsnZmJJNFPXJEl8t88quOuc39fCrHalsGyWcnJL62apYNoq12UQ8DLEFjCMy+kKA7Jy1XQtPlRTVqx+Jx6zXOJI1JbH4jejg3T+KbswBzXnFlz9Tjes/V/3CjWEHDsL/OYNvdCE8Wu3kLUQEhy+ljh+brFFu)
 
 </div>
 
-:::tip
-When used in [in-DOM templates](/guide/essentials/component-basics#in-dom-template-parsing-caveats), it should be referenced as `<keep-alive>`.
+:::tip نکته
+در تمپلیت های [DOM](/guide/essentials/component-basics#in-dom-template-parsing-caveats) باید از `<keep-alive>` استفاده شود.
 :::
 
 ## Include / Exclude {#include-exclude}
@@ -77,9 +78,9 @@ The match is checked against the component's [`name`](/api/options-misc#name) op
 Since version 3.2.34, a single-file component using `<script setup>` will automatically infer its `name` option based on the filename, removing the need to manually declare the name.
 :::
 
-## Max Cached Instances {#max-cached-instances}
+## حداکثر تعداد نمونه‌های کش شده {#max-cached-instances}
 
-We can limit the maximum number of component instances that can be cached via the `max` prop. When `max` is specified, `<KeepAlive>` behaves like an [LRU cache](<https://en.wikipedia.org/wiki/Cache_replacement_policies#Least_recently_used_(LRU)>): if the number of cached instances is about to exceed the specified max count, the least recently accessed cached instance will be destroyed to make room for the new one.
+ما می‌توانیم حداکثر تعداد نمونه‌های کامپوننت که می‌توانند در حافظه ذخیره شوند را توسط ویژگی `max` محدود کنیم. وقتی `max` مشخص شده باشد، `<KeepAlive>`  مانند  [ذخیره‌سازی LRU](https://en.wikipedia.org/wiki/Cache_replacement_policies#Least_recently_used_(LRU)) عمل می‌کند: اگر تعداد نمونه‌های ذخیره شده بیشتر از تعداد max شود، نمونه‌ای که اخیراً کمترین استفاده از آن شده، نابود می‌شود تا جایگاه برای نمونه جدیدی ایجاد شود.
 
 ```vue-html
 <KeepAlive :max="10">
@@ -87,13 +88,13 @@ We can limit the maximum number of component instances that can be cached via th
 </KeepAlive>
 ```
 
-## Lifecycle of Cached Instance {#lifecycle-of-cached-instance}
+## چرخه‌ی حیات نمونه‌های ذخیره‌شده {#lifecycle-of-cached-instance}
 
-When a component instance is removed from the DOM but is part of a component tree cached by `<KeepAlive>`, it goes into a **deactivated** state instead of being unmounted. When a component instance is inserted into the DOM as part of a cached tree, it is **activated**.
+ `<KeepAlive>` به نمونه‌های کامپوننت اجازه می‌دهد که در وضعیت غیرفعال نگه‌داشته شوند وقتی که در بخش قابل مشاهده از برنامه نیستند، و زمانی که نیاز است، دوباره فعال می‌شوند و به بهینه‌سازی عملکرد کمک می‌کند.
 
 <div class="composition-api">
 
-A kept-alive component can register lifecycle hooks for these two states using [`onActivated()`](/api/composition-api-lifecycle#onactivated) and [`onDeactivated()`](/api/composition-api-lifecycle#ondeactivated):
+یک کامپوننت کش شده می‌تواند برای این دو وضعیت از طریق [`onActivated()`](/api/composition-api-lifecycle#onactivated) و [`onDeactivated()`](/api/composition-api-lifecycle#ondeactivated) هوک‌های چرخه حیات را ثبت کند:
 
 ```vue
 <script setup>
@@ -114,7 +115,7 @@ onDeactivated(() => {
 </div>
 <div class="options-api">
 
-A kept-alive component can register lifecycle hooks for these two states using [`activated`](/api/options-lifecycle#activated) and [`deactivated`](/api/options-lifecycle#deactivated) hooks:
+یک کامپوننت کش شده می‌تواند هوک‌های چرخه حیات [`activated`](/api/options-lifecycle#activated) و [`deactivated`](/api/options-lifecycle#deactivated) را برای این دو وضعیت ثبت کند:
 
 ```js
 export default {
@@ -131,14 +132,14 @@ export default {
 
 </div>
 
-Note that:
+توجه داشته باشید که:
 
-- <span class="composition-api">`onActivated`</span><span class="options-api">`activated`</span> is also called on mount, and <span class="composition-api">`onDeactivated`</span><span class="options-api">`deactivated`</span> on unmount.
+- <span class="composition-api">`onActivated`</span><span class="options-api">`activated`</span> در زمان mount فراخوانی می‌شود، و  <span class="composition-api">`onDeactivated`</span><span class="options-api">`deactivated`</span> در زمان unmount.
 
-- Both hooks work for not only the root component cached by `<KeepAlive>`, but also descendant components in the cached tree.
+- این هوک‌ها برای تمام کامپوننت‌ها، هم در سطح اصلی و هم در سطوح عمیق‌تر در داخل درخت کامپوننت کش شده فراخوانی می‌شوند.
 
 ---
 
 **Related**
 
-- [`<KeepAlive>` API reference](/api/built-in-components#keepalive)
+- [`<KeepAlive>` API مرجع](/api/built-in-components#keepalive)
diff --git a/src/guide/built-ins/suspense.md b/src/guide/built-ins/suspense.md
index b940384b..01ebcd04 100644
--- a/src/guide/built-ins/suspense.md
+++ b/src/guide/built-ins/suspense.md
@@ -2,17 +2,17 @@
 outline: deep
 ---
 
-# Suspense {#suspense}
+# تعلیق {#suspense}
 
-:::warning Experimental Feature
-`<Suspense>` is an experimental feature. It is not guaranteed to reach stable status and the API may change before it does.
+:::warning ویژگی آزمایشی
+`<Suspense>` یک ویژگی آزمایشی است و تضمینی برای دستیابی به وضعیت پایدار وجود ندارد. API آن ممکن است قبل از استقرار نهایی تغییر کند.
 :::
 
-`<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.
+`<Suspense>` یک کامپوننت داخلی برای هماهنگ کردن وابستگی‌های ناهمگام در یک درخت کامپوننتی است. این کامپوننت می‌تواند وضعیت بارگیری را نمایش دهد در حالی که منتظر تکمیل وابستگی‌های ناهمزمان مختلفی در درخت کامپوننتی است، که این باعث می‌شود تا تجربه کاربری بهتری فراهم شود.
 
-## Async Dependencies {#async-dependencies}
+## وابستگی های غیر همگام {#async-dependencies}
 
-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:
+برای توضیح مشکلی که `<Suspense>` سعی در حل آن دارد و نحوه تعامل آن با این وابستگی‌های ناهمگام،  سلسله مراتب کامپوننتی زیر را ببینید:
 
 ```
 <Suspense>
@@ -23,20 +23,18 @@ To explain the problem `<Suspense>` is trying to solve and how it interacts with
       ├─ <ActivityFeed> (async component)
       └─ <Stats> (async component)
 ```
+در درخت کامپوننت، چندین کامپوننت تو در تو هستند که نمایش آن‌ها به منابع ناهمگام وابسته است که باید ابتدا تفکیک شوند. بدون `<Suspense>،` هر کدام از این کامپوننت‌ها باید وضعیت‌های  خطا و بارگذاری خودش را مدیریت کند. در بدترین حالت ممکن، ممکن است سه نماد بارگذاری روی صفحه ببینیم و محتوا در زمان‌های مختلفی نمایش داده شود.
 
-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.
+کامپوننت `<Suspense>` به ما این امکان را می‌دهد که در ابتدا وضعیت‌های بارگذاری/خطا با اولویت بالا را نمایش دهیم، در حالی که منتظر رفع وابستگی‌های ناهمگام تودرتو هستیم.
 
-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.
+دو نوع وابستگی ناهمگام وجود دارد که `<Suspense>` می‌تواند منتظر آن‌ها بماند:
+1. کامپوننت‌ها با یک هوک `setup()` ناهمگام. این شامل کامپوننت‌هایی است که از `<script setup>` با عبارات `await` استفاده می‌کنند.
 
-There are two types of async dependencies that `<Suspense>` can wait on:
-
-1. Components with an async `setup()` hook. This includes components using `<script setup>` with top-level `await` expressions.
-
-2. [Async Components](/guide/components/async).
+2. [کامپوننت های ناهمگام](/guide/components/async).
 
 ### `async setup()` {#async-setup}
 
-A Composition API component's `setup()` hook can be async:
+هوک setup() یک کامپوننت Composition API می‌تواند ناهمگام باشد:
 
 ```js
 export default {
@@ -49,8 +47,7 @@ export default {
   }
 }
 ```
-
-If using `<script setup>`, the presence of top-level `await` expressions automatically makes the component an async dependency:
+اگر از `<script setup>` استفاده می‌شود، حضور عبارات `await` به طور خودکار کامپوننت را به یک وابستگی ناهمگام تبدیل می‌کند.
 
 ```vue
 <script setup>
@@ -63,15 +60,17 @@ const posts = await res.json()
 </template>
 ```
 
-### Async Components {#async-components}
+### کامپوننت های ناهمگام {#async-components}
+
+کامپوننت‌های ناهمگام به طور پیش‌فرض قابل **تعلیق** هستند. در این حالت، وضعیت بارگذاری توسط `<Suspense>` کنترل می‌شود و گزینه‌های بارگذاری، خطا، delay و  time-out خود کامپوننت  نادیده گرفته می‌شوند.
 
-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.
+کامپوننت ناهمگام می‌تواند از کنترل `<Suspense>` خارج شده و با تعیین  `suspensible: false` وضعیت بارگذاری خود را کنترل کند.
 
-The async component can opt-out of `Suspense` control and let the component always control its own loading state by specifying `suspensible: false` in its options.
+## وضعیت بارگذاری {#loading-state}
+
+کامپوننت `<Suspense>` دارای دو اسلات به نام‌های `#default` و `#fallback` است. هر دو این قسمت‌ها فقط می‌توانند حاوی یک عنصر اصلی باشند. اگر امکان نمایش محتوای داخل  `#default` وجود داشته باشد، آن محتوا نمایش داده می‌شود. در صورتی که این امکان وجود نداشته باشد، محتوای داخل   `#fallback` نمایش داده می‌شود.
 
-## Loading State {#loading-state}
 
-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.
 
 ```vue-html
 <Suspense>
@@ -84,32 +83,33 @@ The `<Suspense>` component has two slots: `#default` and `#fallback`. Both slots
   </template>
 </Suspense>
 ```
+در رندر اولیه، `<Suspense>` محتوای اسلات `default` را در حافظه نمایش می‌دهد. اگر در طول این فرآیند به وابستگی‌های ناهمگامی برخورد شود، وارد وضعیت **در انتظار** می‌شود. در حالت در انتظار، محتوای اسلات `fallback` نمایش داده می‌شود. زمانی که تمام وابستگی‌های ناهمگام برطرف شده باشند، `<Suspense>` وارد وضعیت **resolved** می‌شود و محتوای اسلات `default`  نمایش داده می‌شود.
 
-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.
-
-If no async dependencies were encountered during the initial render, `<Suspense>` will directly go into a resolved state.
+اگر هیچ وابستگی ناهمگامی در رندر اولیه مشاهده نشد،`<Suspense>` مستقیماً به حالت **resolved** می‌رود.
 
-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.
+`<Suspense>` را مانند یک سوئیچ در نظر بگیرید. وقتی در حالت **resolved** است، یعنی همه چیز آماده است و محتوا را نشان می دهد. تنها در صورتی به حالت **در انتظار** برمی گردد که گره ریشه در اسلات پیش فرض تغییر کند . اما اگر وابستگی‌های ناهمگام جدید که در عمق درخت جا دارند  تغییر کنند، `<Suspense>` به حالت **در انتظار** بر نمی گردد.
 
-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.
+هنگامی که یک بازگشت اتفاق می‌افتد، محتوای `fallback` به صورت فوری نمایش داده نمی‌شود، بلکه `<Suspense>` محتوای قبلی اسلات `default` را نمایش می دهد . این عملکرد می‌تواند با استفاده از پراپ timeout کانفیگ شود:
+اگر نمایش محتوای `default` جدید بیش از مهلت زمانی طول بکشد، `<Suspense>` به محتوای `fallback` تغییر خواهد کرد. مهلت زمانی 0 هم باعث می شود که محتوای `fallback` بلافاصله پس از جایگزینی ، نمایش داده شود.
 
-## Events {#events}
+## رویدادها {#events}
 
-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.
+کامپوننت `<Suspense>`سه رویداد را ایجاد می‌کند: `pending،` `resolve` و `fallback`.
+ رویداد `pending` در زمان ورود به وضعیت **در انتظار** رخ می‌دهد. رویداد `resolve` زمانی رخ می‌دهد که بارگذاری محتوای جدید در اسلات `default` به پایان برسد.  رویداد `fallback` نیز زمانی اتفاق می‌افتد که محتوای اسلات   `fallback` نمایش داده می‌شود.
+ 
+می‌توان از رویدادها به عنوان مثال برای نمایش یک نماد بارگذاری در روی DOM قدیمی هنگامی که کامپوننت‌های جدید در حال بارگذاری هستند، استفاده کرد.
 
-The events could be used, for example, to show a loading indicator in front of the old DOM while new components are loading.
+## مدیریت خطا {#error-handling}
 
-## Error Handling {#error-handling}
+در حال حاضر `<Suspense>` قابلیت مدیریت خطا از طریق خود کامپوننت را فراهم نمی‌کند - با این حال، شما می‌توانید از گزینه [`errorCaptured`](/api/options-lifecycle#errorcaptured) یا هوک [`onErrorCaptured()`](/api/composition-api-lifecycle#onerrorcaptured) برای گرفتن و مدیریت خطاهای ناهمگام در کامپوننت والد `<Suspense>` استفاده کنید.
 
-`<Suspense>` currently does not provide error handling via the component itself - however, you can use the [`errorCaptured`](/api/options-lifecycle#errorcaptured) option or the [`onErrorCaptured()`](/api/composition-api-lifecycle#onerrorcaptured) hook to capture and handle async errors in the parent component of `<Suspense>`.
+## ترکیب با کامپوننت‌های دیگر {#combining-with-other-components}
 
-## Combining with Other Components {#combining-with-other-components}
+معمول است که بخواهیم از کامپوننت `<Suspense>` به همراه کامپوننت‌های [`<Transition>`](./transition) و [`<KeepAlive>`](./keep-alive) استفاده کنیم. ترتیب تو در توی این کامپوننت‌ها مهم است تا همگی به درستی کار کنند.
 
-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.
+به علاوه، این کامپوننت‌ها معمولا با کامپوننت `<RouterView>` از [Vue Router](https://router.vuejs.org/) به کار می‌روند.
 
-In addition, these components are often used in conjunction with the `<RouterView>` component from [Vue Router](https://router.vuejs.org/).
-
-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:
+مثال زیر نشان می‌دهد چگونه این کامپوننت‌ها را به صورت تو در تو قرار دهید تا همگی مطابق انتظار رفتار کنند. برای ترکیب‌های ساده‌تر، می‌توانید کامپوننت‌هایی که نیاز ندارید را حذف کنید:
 
 ```vue-html
 <RouterView v-slot="{ Component }">
@@ -130,5 +130,4 @@ The following example shows how to nest these components so that they all behave
   </template>
 </RouterView>
 ```
-
-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.
+Vue Router برای [ بارگذاری تاخیری کامپوننت‌ها](https://router.vuejs.org/guide/advanced/lazy-loading.html) با استفاده از ایمپورت های پویا ، پشتیبانی داخلی دارد. اینها از کامپوننت‌های ناهمگام متمایز هستند و در حال حاضر باعث فراخوانی `<Suspense>` نمی‌شوند. با این حال، آن‌ها همچنان می‌توانند کامپوننت‌های ناهمگام به عنوان فرزندان داشته باشند که این کامپوننت‌های ناهمگام می‌توانند `<Suspense>` را به روش معمول فراخوانی کنند.
diff --git a/src/guide/built-ins/teleport.md b/src/guide/built-ins/teleport.md
index e63ec654..ebced6b7 100644
--- a/src/guide/built-ins/teleport.md
+++ b/src/guide/built-ins/teleport.md
@@ -1,16 +1,16 @@
-# Teleport {#teleport}
+# تلپورت {#teleport}
 
  <VueSchoolLink href="https://vueschool.io/lessons/vue-3-teleport" title="Free Vue.js Teleport Lesson"/>
 
-`<Teleport>` is a built-in component that allows us to "teleport" a part of a component's template into a DOM node that exists outside the DOM hierarchy of that component.
+`<Teleport>` یک کامپوننت داخلی است که به ما این امکان را می‌دهد که یک بخش از قالب یک کامپوننت را به یک گره DOM منتقل کنیم که در سلسله مراتب DOM آن کامپوننت وجود ندارد.
 
-## Basic Usage {#basic-usage}
+## استفاده پایه {#basic-usage}
 
-Sometimes we may run into the following scenario: a part of a component's template belongs to it logically, but from a visual standpoint, it should be displayed somewhere else in the DOM, outside of the Vue application.
+گاهی اوقات ممکن است به این وضعیت برخورد کنیم: یک بخش از قالب یک کامپوننت از نظر منطقی به آن تعلق دارد، اما از نظر ظاهری باید در مکان دیگری در DOM نمایش داده شود، خارج از ساختار DOM برنامه.
 
-The most common example of this is when building a full-screen modal. Ideally, we want the modal's button and the modal itself to live within the same component, since they are both related to the open / close state of the modal. But that means the modal will be rendered alongside the button, deeply nested in the application's DOM hierarchy. This can create some tricky issues when positioning the modal via CSS.
+یکی از مثال‌های رایج این وضعیت زمانی است که یک مدال تمام صفحه ای ایجاد می‌کنیم. بهتر است دکمه مدال و خود مدال در داخل همان کامپوننت قرار داشته باشند، زیرا هر دو به وضعیت باز/بسته بودن مدال مرتبط هستند. اما این به این معناست که مدال به همراه دکمه در سلسله مراتب DOM برنامه نمایش داده می‌شود و در نتیجه ممکن است موقعیت دهی مدال با استفاده از CSS مشکل‌ساز شود.
 
-Consider the following HTML structure.
+ساختار HTML زیر را در نظر بگیرید.
 
 ```vue-html
 <div class="outer">
@@ -21,7 +21,7 @@ Consider the following HTML structure.
 </div>
 ```
 
-And here is the implementation of `<MyModal>`:
+و در ادامه پیاده‌سازی کامپوننت `<MyModal>` آمده است:
 
 <div class="composition-api">
 
@@ -90,15 +90,15 @@ export default {
 
 </div>
 
-The component contains a `<button>` to trigger the opening of the modal, and a `<div>` with a class of `.modal`, which will contain the modal's content and a button to self-close.
+این کامپوننت شامل یک `<button>` برای ایجاد مدال و یک `<div>` با کلاس `.modal` است که حاوی محتوای مدال و یک دکمه برای بستن مدال به صورت خودکار می‌باشد.
 
-When using this component inside the initial HTML structure, there are a number of potential issues:
+هنگام استفاده از این کامپوننت در ساختار اولیه HTML، ممکن است با چندین مشکل مواجه شوید:
 
-- `position: fixed` only places the element relative to the viewport when no ancestor element has `transform`, `perspective` or `filter` property set. If, for example, we intend to animate the ancestor `<div class="outer">` with a CSS transform, it would break the modal layout!
+- خاصیت `position: fixed` ، زمانی که هیچ عنصر والدی خاصیت‌های `transform،` `perspective` یا `filter`  را نداشته باشد، به عنصر نسبت به  viewport موقعیت می‌دهد . به عنوان مثال، اگر بخواهیم ویژگی‌ `transform` را روی عنصر  `<div class="outer">` اعمال کنیم، ممکن است  ساختار مدال را خراب کند!
 
-- The modal's `z-index` is constrained by its containing elements. If there is another element that overlaps with `<div class="outer">` and has a higher `z-index`, it would cover our modal.
+- ویژگی `z-index` مدال توسط عناصر محتوایی که در آن قرار دارند، محدود می‌شود. اگر عنصر دیگری وجود داشته باشد که با `<div class="outer">` همپوشانی داشته باشد و دارای `z-index` بالاتری باشد، این عنصر ممکن است مدال ما را پوشش دهد.
 
-`<Teleport>` provides a clean way to work around these, by allowing us to break out of the nested DOM structure. Let's modify `<MyModal>` to use `<Teleport>`:
+`<Teleport>` راه مناسبی را برای حل این مشکلات فراهم می‌کند، زیرا به ما امکان می‌دهد از ساختار DOM تو در تو خارج شویم. در مثال زیر کامپوننت `<MyModal>` را تغییر می دهیم تا از `<Teleport>` استفاده کنیم:
 
 ```vue-html{3,8}
 <button @click="open = true">Open Modal</button>
@@ -111,9 +111,9 @@ When using this component inside the initial HTML structure, there are a number
 </Teleport>
 ```
 
-The `to` target of `<Teleport>` expects a CSS selector string or an actual DOM node. Here, we are essentially telling Vue to "**teleport** this template fragment **to** the **`body`** tag".
+وقتی از کامپوننت `<Teleport>` استفاده می‌کنید، باید مشخص کنید که محتوای آن باید به کجا "منتقل" شود. این کار را می‌توانید با ارائه یک استرینگ سلکتور CSS یا یک عنصر  به **to** انجام دهید. در این مورد، به اصطلاح به Vue می‌گوییم: "این قطعه قالب را به تگ body منتقل کن".
 
-You can click the button below and inspect the `<body>` tag via your browser's devtools:
+شما می‌توانید روی دکمه زیر کلیک کنید و تگ `<body>`را از طریق inspect بررسی کنید:
 
 <script setup>
 import { ref } from 'vue'
@@ -147,21 +147,22 @@ const open = ref(false)
 }
 </style>
 
-You can combine `<Teleport>` with [`<Transition>`](./transition) to create animated modals - see [Example here](/examples/#modal).
+شما می‌توانید `<Teleport>` را با [`<Transition>`](./transition) ترکیب کنید تا مدال‌هایی با انیمیشن ایجاد کنید - مثال را در [اینجا](/examples/#modal) ببینید. 
 
-:::tip
-The teleport `to` target must be already in the DOM when the `<Teleport>` component is mounted. Ideally, this should be an element outside the entire Vue application. If targeting another element rendered by Vue, you need to make sure that element is mounted before the `<Teleport>`.
+:::tip نکته
+کامپوننت هدف (to) باید قبل از نصب کامپوننت `<Teleport>` در DOM موجود باشد. ایده‌آل است که این عنصر به عنوان یک عنصر خارج از ساختار کلی برنامه Vue در نظر گرفته شود. در صورتی که هدف انتخاب شده در داخل Vue باشد، باید اطمینان حاصل شود که این عنصر قبل از نصب و اجرای `<Teleport>` آماده و موجود باشد.
 :::
 
-## Using with Components {#using-with-components}
+## استفاده از آن با کامپوننت‌ها {#using-with-components}
 
-`<Teleport>` only alters the rendered DOM structure - it does not affect the logical hierarchy of the components. That is to say, if `<Teleport>` contains a component, that component will remain a logical child of the parent component containing the `<Teleport>`. Props passing and event emitting will continue to work the same way.
 
-This also means that injections from a parent component work as expected, and that the child component will be nested below the parent component in the Vue Devtools, instead of being placed where the actual content moved to.
+`<Teleport>` تنها ساختار DOM نمایشی را تغییر می‌دهد و بر ساختار منطقی کامپوننت‌ها تأثیری نمی‌گذارد. به عبارت دیگر، اگر `<Teleport>` شامل یک کامپوننت باشد، آن کامپوننت همچنان به عنوان فرزند منطقی کامپوننت والدین حاوی `<Teleport>` باقی می‌ماند. انتقال پارامترها (props) و ارسال رویدادها به همان شیوه معمول انجام خواهد شد.
 
-## Disabling Teleport {#disabling-teleport}
+همچنین این معنی را دارد که injection انجام شده از کامپوننت والد به درستی عمل می‌کنند و کامپوننت فرزند در ابزارهای توسعه Vue زیر کامپوننت والد نمایش داده می‌شود، به جای اینکه در مکانی که محتوای واقعی به آن منتقل شده است قرار گیرد.
 
-In some cases, we may want to conditionally disable `<Teleport>`. For example, we may want to render a component as an overlay for desktop, but inline on mobile. `<Teleport>` supports the `disabled` prop which can be dynamically toggled:
+## غیرفعال کردن تلپورت {#disabling-teleport}
+
+در برخی موارد، ممکن است بخواهیم `<Teleport>` را به صورت شرطی غیرفعال کنیم. به عنوان مثال، ممکن است بخواهیم یک کامپوننت را به عنوان یک لایه نمایشی برای دسکتاپ نمایش دهیم، اما در دستگاه‌های موبایل، به صورت تعاملی نمایش دهیم. `<Teleport>` از ویژگی `disabled` پشتیبانی می‌کند که می‌توان آن را به صورت پویا تغییر داد:
 
 ```vue-html
 <Teleport :disabled="isMobile">
@@ -169,13 +170,13 @@ In some cases, we may want to conditionally disable `<Teleport>`. For example, w
 </Teleport>
 ```
 
-Where the `isMobile` state can be dynamically updated by detecting media query changes.
+که وضعیت `isMobile` می‌تواند با تشخیص تغییرات در media query  به صورت پویا به‌روزرسانی شود.
 
-## Multiple Teleports on the Same Target {#multiple-teleports-on-the-same-target}
+## چندین تلپورت بر روی یک هدف {#multiple-teleports-on-the-same-target}
 
-A common use case would be a reusable `<Modal>` component, with the potential for multiple instances to be active at the same time. For this kind of scenario, multiple `<Teleport>` components can mount their content to the same target element. The order will be a simple append - later mounts will be located after earlier ones within the target element.
+یک مورد رایج می‌تواند شامل کامپوننت `<Modal>` باشد که امکان فعال شدن همزمان چندین نمونه را فراهم می‌کند.  در این نوع سناریو، چندین کامپوننت `<Teleport>` می‌توانند محتوای خود را به همان عنصر هدف منتقل کنند. ترتیب الحاق المان‌ها ، به ترتیب انتقال‌دهی خواهد بود، به این معنا که المان‌های بعدی پس از المان‌های انتقالی اولیه در داخل عنصر هدف قرار می‌گیرند.
 
-Given the following usage:
+با توجه به موارد زیر:
 
 ```vue-html
 <Teleport to="#modals">
@@ -186,7 +187,7 @@ Given the following usage:
 </Teleport>
 ```
 
-The rendered result would be:
+نتیجه‌ی نهایی به صورت زیر خواهد بود:
 
 ```html
 <div id="modals">
@@ -199,5 +200,5 @@ The rendered result would be:
 
 **Related**
 
-- [`<Teleport>` API reference](/api/built-in-components#teleport)
-- [Handling Teleports in SSR](/guide/scaling-up/ssr#teleports)
+- [مستندات API `<Teleport>`](/api/built-in-components#teleport)
+- [مدیریت تله‌پورت‌ها در SSR](/guide/scaling-up/ssr#teleports)