diff --git a/src/guide/essentials/list.md b/src/guide/essentials/list.md
index 94800b69..8509745e 100644
--- a/src/guide/essentials/list.md
+++ b/src/guide/essentials/list.md
@@ -1,4 +1,4 @@
-# List Rendering {#list-rendering}
+# نمایش لیست {#list-rendering}
 
 <div class="options-api">
   <VueSchoolLink href="https://vueschool.io/lessons/list-rendering-in-vue-3" title="Free Vue.js List Rendering Lesson"/>
@@ -10,7 +10,7 @@
 
 ## `v-for` {#v-for}
 
-We can use the `v-for` directive to render a list of items based on an array. The `v-for` directive requires a special syntax in the form of `item in items`, where `items` is the source data array and `item` is an **alias** for the array element being iterated on:
+ما می‌توانیم از دستور `v-for` برای نمایش یک لیست از آیتم‌ها، بر اساس یک آرایه استفاده کنیم. دستور `v-for` نیاز به یک سینتکس ویژه به شکل `item in items` دارد، جایی که `items` آرایه منبع و `item` **نام مستعار** برای عنصر آرایه‌ای است که در حال حلقه زدن بر آن هستیم:
 
 <div class="composition-api">
 
@@ -38,7 +38,7 @@ data() {
 </li>
 ```
 
-Inside the `v-for` scope, template expressions have access to all parent scope properties. In addition, `v-for` also supports an optional second alias for the index of the current item:
+درون اِسکوپ `v-for`، عبارات الگو (آنچه داخل `v-for` می‌نویسیم) دسترسی به همه مشخصه‌های اِسکوپ والد را دارند. علاوه بر این، `v-for` همچنین از یک نام دوم اختیاری برای اَندیس آیتم فعلی پشتیبانی می‌کند:
 
 <div class="composition-api">
 
@@ -79,16 +79,16 @@ const items = [{ message: 'Foo' }, { message: 'Bar' }]
 
 <div class="composition-api">
 
-[Try it in the Playground](https://play.vuejs.org/#eNpdTsuqwjAQ/ZVDNlFQu5d64bpwJ7g3LopOJdAmIRlFCPl3p60PcDWcM+eV1X8Iq/uN1FrV6RxtYCTiW/gzzvbBR0ZGpBYFbfQ9tEi1ccadvUuM0ERyvKeUmithMyhn+jCSev4WWaY+vZ7HjH5Sr6F33muUhTR8uW0ThTuJua6mPbJEgGSErmEaENedxX3Z+rgxajbEL2DdhR5zOVOdUSIEDOf8M7IULCHsaPgiMa1eK4QcS6rOSkhdfapVeQLQEWnH)
+دقت کنید در مثال بالا دایره برای المنت `<li> </li>` می‌باشد [امتحان این مورد در Playground](https://play.vuejs.org/#eNpdTsuqwjAQ/ZVDNlFQu5d64bpwJ7g3LopOJdAmIRlFCPl3p60PcDWcM+eV1X8Iq/uN1FrV6RxtYCTiW/gzzvbBR0ZGpBYFbfQ9tEi1ccadvUuM0ERyvKeUmithMyhn+jCSev4WWaY+vZ7HjH5Sr6F33muUhTR8uW0ThTuJua6mPbJEgGSErmEaENedxX3Z+rgxajbEL2DdhR5zOVOdUSIEDOf8M7IULCHsaPgiMa1eK4QcS6rOSkhdfapVeQLQEWnH)
 
 </div>
 <div class="options-api">
 
-[Try it in the Playground](https://play.vuejs.org/#eNpVTssKwjAQ/JUllyr0cS9V0IM3wbvxEOxWAm0a0m0phPy7m1aqhpDsDLMz48XJ2nwaUZSiGp5OWzpKg7PtHUGNjRpbAi8NQK1I7fbrLMkhjc5EJAn4WOXQ0BWHQb2whOS24CSN6qjXhN1Qwt1Dt2kufZ9ASOGXOyvH3GMNCdGdH75VsZVjwGa2VYQRUdVqmLKmdwcpdjEnBW1qnPf8wZIrBQujoff/RSEEyIDZZeGLeCn/dGJyCSlazSZVsUWL8AYme21i)
+[امتحان این مورد در Playground](https://play.vuejs.org/#eNpVTssKwjAQ/JUllyr0cS9V0IM3wbvxEOxWAm0a0m0phPy7m1aqhpDsDLMz48XJ2nwaUZSiGp5OWzpKg7PtHUGNjRpbAi8NQK1I7fbrLMkhjc5EJAn4WOXQ0BWHQb2whOS24CSN6qjXhN1Qwt1Dt2kufZ9ASOGXOyvH3GMNCdGdH75VsZVjwGa2VYQRUdVqmLKmdwcpdjEnBW1qnPf8wZIrBQujoff/RSEEyIDZZeGLeCn/dGJyCSlazSZVsUWL8AYme21i)
 
 </div>
 
-The variable scoping of `v-for` is similar to the following JavaScript:
+اِسکوپ متغیر در `v-for` مشابه کد جاوااسکریپت زیر است:
 
 ```js
 const parentMessage = 'Parent'
@@ -97,13 +97,13 @@ const items = [
 ]
 
 items.forEach((item, index) => {
-  // has access to outer scope `parentMessage`
-  // but `item` and `index` are only available in here
+  // دارد `parentMessage` دسترسی به متغیر بیرونی
+  // فقط در اینجا در دسترس هستند `index` و `item` اما
   console.log(parentMessage, item.message, index)
 })
 ```
 
-Notice how the `v-for` value matches the function signature of the `forEach` callback. In fact, you can use destructuring on the `v-for` item alias similar to destructuring function arguments:
+توجه کنید که مقدار `v-for` با امضای تابع `forEach` همخوانی دارد. در واقع، می‌توانید برای نماینده مورد استفاده در `v-for` از تخریب (اشاره به destructuring) متشابه با تخریب آرگومان‌های تابع استفاده کنید.
 
 ```vue-html
 <li v-for="{ message } in items">
@@ -116,7 +116,7 @@ Notice how the `v-for` value matches the function signature of the `forEach` cal
 </li>
 ```
 
-For nested `v-for`, scoping also works similar to nested functions. Each `v-for` scope has access to parent scopes:
+برای `v-for` تو در تو، اِسکوپ متغیر هم مشابه توابع تو در تو عمل می‌کند. هر اِسکوپ `v-for` دسترسی به اِسکوپ والد و بالاتر دارد:
 
 ```vue-html
 <li v-for="item in items">
@@ -126,15 +126,15 @@ For nested `v-for`, scoping also works similar to nested functions. Each `v-for`
 </li>
 ```
 
-You can also use `of` as the delimiter instead of `in`, so that it is closer to JavaScript's syntax for iterators:
+همچنین می‌توانید به جای `in` از `of` به عنوان جداکننده استفاده کنید تا به سینتکس جاوااسکریپت برای iterator نزدیک‌تر باشد:
 
 ```vue-html
 <div v-for="item of items"></div>
 ```
 
-## `v-for` with an Object {#v-for-with-an-object}
+## `v-for` با یک شیء  {#v-for-with-an-object}
 
-You can also use `v-for` to iterate through the properties of an object. The iteration order will be based on the result of calling `Object.keys()` on the object:
+همچنین می‌توانید از `v-for` برای تکرار کلیدهای یک شیء استفاده کنید. ترتیب تکرار بر اساس نتیجه تابع `Object.keys()‎` روی شیء خواهد بود:
 
 <div class="composition-api">
 
@@ -171,7 +171,7 @@ data() {
 </ul>
 ```
 
-You can also provide a second alias for the property's name (a.k.a. key):
+همچنین می‌توانید یک نام مستعار دیگر برای مشخصه کلید ارائه دهید:
 
 ```vue-html
 <li v-for="(value, key) in myObject">
@@ -179,7 +179,7 @@ You can also provide a second alias for the property's name (a.k.a. key):
 </li>
 ```
 
-And another for the index:
+و یکی دیگر برای اَندیس:
 
 ```vue-html
 <li v-for="(value, key, index) in myObject">
@@ -189,28 +189,28 @@ And another for the index:
 
 <div class="composition-api">
 
-[Try it in the Playground](https://play.vuejs.org/#eNo9jjFvgzAQhf/KE0sSCQKpqg7IqRSpQ9WlWycvBC6KW2NbcKaNEP+9B7Tx4nt33917Y3IKYT9ESspE9XVnAqMnjuFZO9MG3zFGdFTVbAbChEvnW2yE32inXe1dz2hv7+dPqhnHO7kdtQPYsKUSm1f/DfZoPKzpuYdx+JAL6cxUka++E+itcoQX/9cO8SzslZoTy+yhODxlxWN2KMR22mmn8jWrpBTB1AZbMc2KVbTyQ56yBkN28d1RJ9uhspFSfNEtFf+GfnZzjP/oOll2NQPjuM4xTftZyIaU5VwuN0SsqMqtWZxUvliq/J4jmX4BTCp08A==)
+[امتحان این مورد در Playground](https://play.vuejs.org/#eNo9jjFvgzAQhf/KE0sSCQKpqg7IqRSpQ9WlWycvBC6KW2NbcKaNEP+9B7Tx4nt33917Y3IKYT9ESspE9XVnAqMnjuFZO9MG3zFGdFTVbAbChEvnW2yE32inXe1dz2hv7+dPqhnHO7kdtQPYsKUSm1f/DfZoPKzpuYdx+JAL6cxUka++E+itcoQX/9cO8SzslZoTy+yhODxlxWN2KMR22mmn8jWrpBTB1AZbMc2KVbTyQ56yBkN28d1RJ9uhspFSfNEtFf+GfnZzjP/oOll2NQPjuM4xTftZyIaU5VwuN0SsqMqtWZxUvliq/J4jmX4BTCp08A==)
 
 </div>
 <div class="options-api">
 
-[Try it in the Playground](https://play.vuejs.org/#eNo9T8FqwzAM/RWRS1pImnSMHYI3KOwwdtltJ1/cRqXe3Ng4ctYS8u+TbVJjLD3rPelpLg7O7aaARVeI8eS1ozc54M1ZT9DjWQVDMMsBoFekNtucS/JIwQ8RSQI+1/vX8QdP1K2E+EmaDHZQftg/IAu9BaNHGkEP8B2wrFYxgAp0sZ6pn2pAeLepmEuSXDiy7oL9gduXT+3+pW6f631bZoqkJY/kkB6+onnswoDw6owijIhEMByjUBgNU322/lUWm0mZgBX84r1ifz3ettHmupYskjbanedch2XZRcAKTnnvGVIPBpkqGqPTJNGkkaJ5+CiWf4KkfBs=)
+[امتحان این مورد در Playground](https://play.vuejs.org/#eNo9T8FqwzAM/RWRS1pImnSMHYI3KOwwdtltJ1/cRqXe3Ng4ctYS8u+TbVJjLD3rPelpLg7O7aaARVeI8eS1ozc54M1ZT9DjWQVDMMsBoFekNtucS/JIwQ8RSQI+1/vX8QdP1K2E+EmaDHZQftg/IAu9BaNHGkEP8B2wrFYxgAp0sZ6pn2pAeLepmEuSXDiy7oL9gduXT+3+pW6f631bZoqkJY/kkB6+onnswoDw6owijIhEMByjUBgNU322/lUWm0mZgBX84r1ifz3ettHmupYskjbanedch2XZRcAKTnnvGVIPBpkqGqPTJNGkkaJ5+CiWf4KkfBs=)
 
 </div>
 
-## `v-for` with a Range {#v-for-with-a-range}
+## `v-for` با یک محدوده مشخص {#v-for-with-a-range}
 
-`v-for` can also take an integer. In this case it will repeat the template that many times, based on a range of `1...n`.
+`v-for` همچنین می‌تواند یک عدد صحیح بگیرد. در این حالت، الگو مورد نظر به تعداد آن تکرار می‌شود، بر اساس یک محدوده از `‍‎1...n`.
 
 ```vue-html
 <span v-for="n in 10">{{ n }}</span>
 ```
 
-Note here `n` starts with an initial value of `1` instead of `0`.
+توجه کنید که در اینجا `n` با مقدار اولیه `1` به جای `0` شروع می‌شود.
 
-## `v-for` on `<template>` {#v-for-on-template}
+## `v-for` روی `<template>`  {#v-for-on-template}
 
-Similar to template `v-if`, you can also use a `<template>` tag with `v-for` to render a block of multiple elements. For example:
+مشابه الگوی `v-if`، می‌توانید از تگ `<template>` با `v-for` برای رندر کردن یک بلوک از چندین المان استفاده کنید. برای مثال:
 
 ```vue-html
 <ul>
@@ -221,25 +221,25 @@ Similar to template `v-if`, you can also use a `<template>` tag with `v-for` to
 </ul>
 ```
 
-## `v-for` with `v-if` {#v-for-with-v-if}
+## `v-if` با `v-for` {#v-if-with-v-for}
 
-:::warning Note
-It's **not** recommended to use `v-if` and `v-for` on the same element due to implicit precedence. Refer to [style guide](/style-guide/rules-essential#avoid-v-if-with-v-for) for details.
+::: warning توجه داشته باشید
+استفاده از `v-if` و `v-for` روی یک عنصر به دلیل اولویت ضمنی، **توصیه نمی‌شود**. برای جزئیات به [style guide](/style-guide/rules-essential#avoid-v-if-with-v-for) مراجعه کنید. 
 :::
 
-When they exist on the same node, `v-if` has a higher priority than `v-for`. That means the `v-if` condition will not have access to variables from the scope of the `v-for`:
+وقتی هر دو روی یک نود وجود داشته باشند، `v-if` اولویت بالاتری نسبت به `v-for` دارد. این بدان معناست که شرط `v-if` دسترسی به متغیرهای درون اِسکوپ `v-for` نخواهد داشت:
 
 ```vue-html
 <!--
-This will throw an error because property "todo"
-is not defined on instance.
+"todo" خطا می‌دهد چون خاصیت
+بر روی نمونه تعریف نشده است
 -->
 <li v-for="todo in todos" v-if="!todo.isComplete">
   {{ todo.name }}
 </li>
 ```
 
-This can be fixed by moving `v-for` to a wrapping `<template>` tag (which is also more explicit):
+این مشکل با انتقال `v-for` به یک تگ `<template>` (که واضح‌تر هم هست) حل می‌شود:
 
 ```vue-html
 <template v-for="todo in todos">
@@ -249,13 +249,13 @@ This can be fixed by moving `v-for` to a wrapping `<template>` tag (which is als
 </template>
 ```
 
-## Maintaining State with `key` {#maintaining-state-with-key}
+## حفظ وضعیت با `key` {#maintaining-state-with-key}
 
-When Vue is updating a list of elements rendered with `v-for`, by default it uses an "in-place patch" strategy. If the order of the data items has changed, instead of moving the DOM elements to match the order of the items, Vue will patch each element in-place and make sure it reflects what should be rendered at that particular index.
+وقتی Vue لیستی از المان‌های رندرشده با `v-for` را به‌روزرسانی می‌کند، به طور پیش‌فرض از استراتژی پچ در محل (in-place patch) استفاده می‌کند. اگر ترتیب آیتم‌های داده تغییر کرده باشد، به جای جابجایی المان‌های DOM برای مطابقت با ترتیب آیتم‌ها، Vue هر المان را د رجای قبلی خود اصلاح می‌کند و مطمئن می‌شود که محتوای رندرشده در آن اندیس خاص درست است.
 
-This default mode is efficient, but **only suitable when your list render output does not rely on child component state or temporary DOM state (e.g. form input values)**.
+این حالت پیش‌فرض بهینه است، اما **فقط وقتی مناسب است که خروجی رندر لیست شما به state کامپوننت فرزند یا state موقتی DOM (مثل مقادیر فرم) وابسته نباشد.**
 
-To give Vue a hint so that it can track each node's identity, and thus reuse and reorder existing elements, you need to provide a unique `key` attribute for each item:
+برای اینکه به Vue کمک کنید هویت هر نود را دنبال کند و در نتیجه المان‌های موجود را در استفاده مجدد مرتب کند، نیاز است برای هر آیتم یک خاصیت `key` منحصربفرد ارائه دهید:
 
 ```vue-html
 <div v-for="item in items" :key="item.id">
@@ -263,7 +263,7 @@ To give Vue a hint so that it can track each node's identity, and thus reuse and
 </div>
 ```
 
-When using `<template v-for>`, the `key` should be placed on the `<template>` container:
+وقتی از `<template v-for>` استفاده می‌کنید، `key` باید روی خود تگ `<template>` قرار بگیرد:
 
 ```vue-html
 <template v-for="todo in todos" :key="todo.name">
@@ -271,25 +271,25 @@ When using `<template v-for>`, the `key` should be placed on the `<template>` co
 </template>
 ```
 
-:::tip Note
-`key` here is a special attribute being bound with `v-bind`. It should not be confused with the property key variable when [using `v-for` with an object](#v-for-with-an-object).
+:::tip توجه
+`key` اینجا یک خاصیت ویژه‌ای است که با `v-bind` پیاده سازی شده است. نباید آن را با متغیر کلیدی key هنگام [استفاده از v-for با یک شیء](#v-for-with-an-object) اشتباه بگیرید.
 :::
 
-[It is recommended](/style-guide/rules-essential#use-keyed-v-for) to provide a `key` attribute with `v-for` whenever possible, unless the iterated DOM content is simple (i.e. contains no components or stateful DOM elements), or you are intentionally relying on the default behavior for performance gains.
+[توصیه می‌شود](/style-guide/rules-essential#use-keyed-v-for) هر جا امکان دارد یک خاصیت `key` با `v-for` ارائه دهید، مگر اینکه محتوای DOM تکرارشونده ساده باشد (هیچ اجزاء یا المان‌های DOM حاوی state نباشد) یا عمداً برای افزایش عملکرد به رفتار پیش فرض تکیه می کنید. (مترجم:‌ همه جا از `key` استفاده کنید چون از آینده خبر ندارید و نمی‌دونید چه بلایی قراره سر کدی که شما نوشتید بیاد 😃)
 
-The `key` binding expects primitive values - i.e. strings and numbers. Do not use objects as `v-for` keys. For detailed usage of the `key` attribute, please see the [`key` API documentation](/api/built-in-special-attributes#key).
+خاصیت `key` مقادیر اولیه - یعنی رشته‌ها و اعداد - را انتظار دارد. از شیء‌ها به عنوان کلید `v-for` استفاده نکنید. برای استفاده جزئی از خاصیت `key` لطفا به [مستندات API key](/api/built-in-special-attributes#key) مراجعه کنید. (مترجم: از `index` درون `v-for` به عنوان `key` استفاده نکنید)
 
-## `v-for` with a Component {#v-for-with-a-component}
+## `v-for` به‌همراه کامپوننت  {#v-for-with-a-component}
 
-> This section assumes knowledge of [Components](/guide/essentials/component-basics). Feel free to skip it and come back later.
+> این بخش به پیش‌نیاز [کامپوننت‌ها](/guide/essentials/component-basics) نیاز دارد. اگر می‌خواهید می‌توانید آن را رد کنید و بعدا برگردید.
 
-You can directly use `v-for` on a component, like any normal element (don't forget to provide a `key`):
+می‌توانید مستقیما `v-for` را روی یک کامپوننت، مانند هر المان عادی، استفاده کنید (فراموش نکنید `key` ارائه دهید):
 
 ```vue-html
 <MyComponent v-for="item in items" :key="item.id" />
 ```
 
-However, this won't automatically pass any data to the component, because components have isolated scopes of their own. In order to pass the iterated data into the component, we should also use props:
+اما این به طور خودکار داده‌ای را به کامپوننت منتقل نمی‌کند، چرا که کامپوننت‌ها اِسکوپ مستقل خودشان را دارند. برای منتقل کردن داده‌ به کامپوننت، باید از props هم استفاده کنیم:
 
 ```vue-html
 <MyComponent
@@ -300,41 +300,41 @@ However, this won't automatically pass any data to the component, because compon
 />
 ```
 
-The reason for not automatically injecting `item` into the component is because that makes the component tightly coupled to how `v-for` works. Being explicit about where its data comes from makes the component reusable in other situations.
+دلیل اینکه `item` به طور خودکار به کامپوننت تزریق نمی‌شود این است که این کار باعث وابستگی شدید کامپوننت به نحوه کارکرد `v-for` می‌شود. مشخص کردن صریح منبع داده‌ باعث می‌شود کامپوننت در سایر موقعیت‌ها نیز قابل استفاده مجدد باشد.
 
 <div class="composition-api">
 
-Check out [this example of a simple todo list](https://play.vuejs.org/#eNp1U8Fu2zAM/RXCGGAHTWx02ylwgxZYB+ywYRhyq3dwLGYRYkuCJTsZjPz7KMmK3ay9JBQfH/meKA/Rk1Jp32G0jnJdtVwZ0Gg6tSkEb5RsDQzQ4h4usG9lAzGVxldoK5n8ZrAZsTQLCduRygAKUUmhDQg8WWyLZwMPtmESx4sAGkL0mH6xrMH+AHC2hvuljw03Na4h/iLBHBAY1wfUbsTFVcwoH28o2/KIIDuaQ0TTlvrwNu/TDe+7PDlKXZ6EZxTiN4kuRI3W0dk4u4yUf7bZfScqw6WAkrEf3m+y8AOcw7Qv6w5T1elDMhs7Nbq7e61gdmme60SQAvgfIhExiSSJeeb3SBukAy1D1aVBezL5XrYN9Csp1rrbNdykqsUehXkookl0EVGxlZHX5Q5rIBLhNHFlbRD6xBiUzlOeuZJQz4XqjI+BxjSSYe2pQWwRBZizV01DmsRWeJA1Qzv0Of2TwldE5hZRlVd+FkbuOmOksJLybIwtkmfWqg+7qz47asXpSiaN3lxikSVwwfC8oD+/sEnV+oh/qcxmU85mebepgLjDBD622Mg+oDrVquYVJm7IEu4XoXKTZ1dho3gnmdJhedEymn9ab3ysDPdc4M9WKp28xE5JbB+rzz/Trm3eK3LAu8/E7p2PNzYM/i3ChR7W7L7hsSIvR7L2Aal1EhqTp80vF95sw3WcG7r8A0XaeME=) to see how to render a list of components using `v-for`, passing different data to each instance.
+[این مثال لیست کارها](https://play.vuejs.org/#eNp1U8Fu2zAM/RXCGGAHTWx02ylwgxZYB+ywYRhyq3dwLGYRYkuCJTsZjPz7KMmK3ay9JBQfH/meKA/Rk1Jp32G0jnJdtVwZ0Gg6tSkEb5RsDQzQ4h4usG9lAzGVxldoK5n8ZrAZsTQLCduRygAKUUmhDQg8WWyLZwMPtmESx4sAGkL0mH6xrMH+AHC2hvuljw03Na4h/iLBHBAY1wfUbsTFVcwoH28o2/KIIDuaQ0TTlvrwNu/TDe+7PDlKXZ6EZxTiN4kuRI3W0dk4u4yUf7bZfScqw6WAkrEf3m+y8AOcw7Qv6w5T1elDMhs7Nbq7e61gdmme60SQAvgfIhExiSSJeeb3SBukAy1D1aVBezL5XrYN9Csp1rrbNdykqsUehXkookl0EVGxlZHX5Q5rIBLhNHFlbRD6xBiUzlOeuZJQz4XqjI+BxjSSYe2pQWwRBZizV01DmsRWeJA1Qzv0Of2TwldE5hZRlVd+FkbuOmOksJLybIwtkmfWqg+7qz47asXpSiaN3lxikSVwwfC8oD+/sEnV+oh/qcxmU85mebepgLjDBD622Mg+oDrVquYVJm7IEu4XoXKTZ1dho3gnmdJhedEymn9ab3ysDPdc4M9WKp28xE5JbB+rzz/Trm3eK3LAu8/E7p2PNzYM/i3ChR7W7L7hsSIvR7L2Aal1EhqTp80vF95sw3WcG7r8A0XaeME=) را ببینید تا بیاموزید چگونه با استفاده از `v-for` لیستی از کامپوننت‌ها را رندر کرده و داده‌های متفاوتی به هر نمونه ارسال کنید.
 
 </div>
 <div class="options-api">
 
-Check out [this example of a simple todo list](https://play.vuejs.org/#eNqNVE2PmzAQ/SsjVIlEm4C27Qmx0a7UVuqhPVS5lT04eFKsgG2BSVJF+e8d2xhIu10tihR75s2bNx9wiZ60To49RlmUd2UrtNkUUjRatQa2iquvBhvYt6qBOEmDwQbEhQQoJJ4dlOOe9bWBi7WWiuIlStNlcJlYrivr5MywxdIDAVo0fSvDDUDiyeK3eDYZxLGLsI8hI7H9DHeYQuwjeAb3I9gFCFMjUXxSYCoELroKO6fZP17Mf6jev0i1ZQcE1RtHaFrWVW/l+/Ai3zd1clQ1O8k5Uzg+j1HUZePaSFwfvdGhfNIGTaW47bV3Mc6/+zZOfaaslegS18ZE9121mIm0Ep17ynN3N5M8CB4g44AC4Lq8yTFDwAPNcK63kPTL03HR6EKboWtm0N5MvldtA8e1klnX7xphEt3ikTbpoYimsoqIwJY0r9kOa6Ag8lPeta2PvE+cA3M7k6cOEvBC6n7UfVw3imPtQ8eiouAW/IY0mElsiZWqOdqkn5NfCXxB5G6SJRvj05By1xujpJWUp8PZevLUluqP/ajPploLasmk0Re3sJ4VCMnxvKQ//0JMqrID/iaYtSaCz+xudsHjLpPzscVGHYO3SzpdixIXLskK7pcBucnTUdgg3kkmcxhetIrmH4ebr8m/n4jC6FZp+z7HTlLsVx1p4M7odcXPr6+Lnb8YOne5+C2F6/D6DH2Hx5JqOlCJ7yz7IlBTbZsf7vjXVBzjvLDrH5T0lgo=) to see how to render a list of components using `v-for`, passing different data to each instance.
+[این مثال لیست کارها](https://play.vuejs.org/#eNqNVE2PmzAQ/SsjVIlEm4C27Qmx0a7UVuqhPVS5lT04eFKsgG2BSVJF+e8d2xhIu10tihR75s2bNx9wiZ60To49RlmUd2UrtNkUUjRatQa2iquvBhvYt6qBOEmDwQbEhQQoJJ4dlOOe9bWBi7WWiuIlStNlcJlYrivr5MywxdIDAVo0fSvDDUDiyeK3eDYZxLGLsI8hI7H9DHeYQuwjeAb3I9gFCFMjUXxSYCoELroKO6fZP17Mf6jev0i1ZQcE1RtHaFrWVW/l+/Ai3zd1clQ1O8k5Uzg+j1HUZePaSFwfvdGhfNIGTaW47bV3Mc6/+zZOfaaslegS18ZE9121mIm0Ep17ynN3N5M8CB4g44AC4Lq8yTFDwAPNcK63kPTL03HR6EKboWtm0N5MvldtA8e1klnX7xphEt3ikTbpoYimsoqIwJY0r9kOa6Ag8lPeta2PvE+cA3M7k6cOEvBC6n7UfVw3imPtQ8eiouAW/IY0mElsiZWqOdqkn5NfCXxB5G6SJRvj05By1xujpJWUp8PZevLUluqP/ajPploLasmk0Re3sJ4VCMnxvKQ//0JMqrID/iaYtSaCz+xudsHjLpPzscVGHYO3SzpdixIXLskK7pcBucnTUdgg3kkmcxhetIrmH4ebr8m/n4jC6FZp+z7HTlLsVx1p4M7odcXPr6+Lnb8YOne5+C2F6/D6DH2Hx5JqOlCJ7yz7IlBTbZsf7vjXVBzjvLDrH5T0lgo=) را ببینید تا بیاموزید چگونه با استفاده از `v-for` لیستی از کامپوننت‌ها را رندر کرده و داده‌های متفاوتی به هر نمونه ارسال کنید.
 
 </div>
 
-## Array Change Detection {#array-change-detection}
+## تشخیص تغییرات آرایه {#array-change-detection}
 
-### Mutation Methods {#mutation-methods}
+### متدهای ایجاد تغییر {#mutation-methods}
 
-Vue is able to detect when a reactive array's mutation methods are called and trigger necessary updates. These mutation methods are:
+Vue می‌تواند تشخیص دهد که کدام متد برای تغییر محتوا یک آرایه واکنش‌گرا (reactive) صدا زده شده‌ و به‌روزرسانی‌های لازم را اعمال کند. این متدها عبارتند از:
 
-- `push()`
-- `pop()`
-- `shift()`
-- `unshift()`
-- `splice()`
-- `sort()`
-- `reverse()`
+- `push()‎`
+- `pop()‎`
+- `shift()‎`
+- `unshift()‎`
+- `splice()‎`
+- `sort()‎`
+- `reverse()‎`
 
-### Replacing an Array {#replacing-an-array}
+### جایگزینی یک آرایه {#replacing-an-array}
 
-Mutation methods, as the name suggests, mutate the original array they are called on. In comparison, there are also non-mutating methods, e.g. `filter()`, `concat()` and `slice()`, which do not mutate the original array but **always return a new array**. When working with non-mutating methods, we should replace the old array with the new one:
+همانطور که از نامشان پیداست، متدهای تغییر محتوا روی آرایه‌ای که روی آن صدا زده می‌شوند تغییر ایجاد می‌کنند. در مقابل، روش‌های غیرجهشی مانند `filter()‎`، `concat()‎` و `slice()‎` روی آرایه اصلی تغییر ایجاد نمی‌کنند بلکه **همیشه آرایه‌ای جدید** برمی‌گردانند. هنگام کار با این روش‌ها باید آرایه قدیمی را با آرایه جدید جایگزین کنیم:
 
 <div class="composition-api">
 
 ```js
-// `items` is a ref with array value
+// با مقدار آرایه است ref یک `items`
 items.value = items.value.filter((item) => item.message.match(/Foo/))
 ```
 
@@ -347,13 +347,13 @@ this.items = this.items.filter((item) => item.message.match(/Foo/))
 
 </div>
 
-You might think this will cause Vue to throw away the existing DOM and re-render the entire list - luckily, that is not the case. Vue implements some smart heuristics to maximize DOM element reuse, so replacing an array with another array containing overlapping objects is a very efficient operation.
+شاید فکر کنید این کار باعث می‌شود Vue تمام DOM موجود را دور بریزد و کل لیست را دوباره رندر کند - خوشبختانه اینطور نیست. Vue الگوریتم‌های هوشمندی را برای حداکثر استفاده مجدد از المان‌های DOM پیاده‌سازی کرده است، بنابراین جایگزین کردن یک آرایه با آرایه‌ای دیگر که حاوی شیء‌های تکراری است یک عملیات سبک است.
 
-## Displaying Filtered/Sorted Results {#displaying-filtered-sorted-results}
+## نمایش نتایج فیلتر شده / مرتب‌ شده {#displaying-filtered-sorted-results}
 
-Sometimes we want to display a filtered or sorted version of an array without actually mutating or resetting the original data. In this case, you can create a computed property that returns the filtered or sorted array.
+گاهی اوقات می‌خواهیم نسخه‌ای فیلتر یا مرتب‌شده از یک آرایه را نمایش دهیم بدون اینکه واقعا روی داده‌های اصلی تغییر ایجاد کنیم یا آن‌ها را ریست کنیم. در این موارد می‌توانیم یک کامپیوتد (computed) بسازیم که آرایه فیلتر یا مرتب‌شده را برمی‌گرداند.
 
-For example:
+برای مثال:
 
 <div class="composition-api">
 
@@ -387,7 +387,7 @@ computed: {
 <li v-for="n in evenNumbers">{{ n }}</li>
 ```
 
-In situations where computed properties are not feasible (e.g. inside nested `v-for` loops), you can use a method:
+در موقعیت‌هایی که از خاصیت‌های کامپیوتد (computed) امکان‌پذیر نیست (مثلا درون حلقه‌های تودرتوی `v-for`)، می‌توانید از یک متد استفاده کنید:
 
 <div class="composition-api">
 
@@ -426,7 +426,7 @@ methods: {
 </ul>
 ```
 
-Be careful with `reverse()` and `sort()` in a computed property! These two methods will mutate the original array, which should be avoided in computed getters. Create a copy of the original array before calling these methods:
+هنگام استفاده از `reverse()‎` و `sort()‎` در یک خاصیت کامپیوتد (computed) مراقب باشید! این دو متد روی آرایه اصلی تغییر ایجاد می‌کنند که در getter‌های کامپیوتد باید از آن اجتناب کرد. قبل از صدا زدن این متدها، یک کپی از آرایه اصلی را بسازید. (مانند کد زیر)
 
 ```diff
 - return numbers.reverse()