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

@@ -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,23 +78,23 @@ 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">
   <component :is="activeComponent" />
 </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)