Merge remote-tracking branch 'origin/upstream'

src/guide/built-ins/transition.md

@@ -581,7 +581,32 @@ export default {
 
 همچنین می‌توانید بر اساس state فعلی کامپوننت خود، رفتار مختلف را در هوک‌های ترنزیشن JavaScript اعمال کنید. در نهایت، راه حقیقی ایجاد ترنزیشن‌های پویا از طریق [کامپوننت‌های انتقال قابل استفاده مجدد](#reusable-transitions) است که پراپ‌ها را برای تغییر خصوصیات ترنزیشن(ها) مورد استفاده، دریافت می‌کنند.
 
-ممکن است خنده دار به نظر برسد، اما واقعاً تنها محدودیت، خلاقیت شماست.
+ممکن است خنده دار به نظر برسد، اما تنها محدودیت، خلاقیت شماست.
+
+## ترنزیشن با اتریبیوت key {#transitions-with-the-key-attribute}
+
+گاهی اوقات شما نیاز دارید که یک عنصر DOM را دوباره رندر کنید تا یک ترنزیشن رخ دهد.
+
+برای مثال این کامپوننت شمارنده را در نظر بگیرید.
+
+```vue
+<script setup>
+import { ref } from 'vue';
+const count = ref(0);
+
+setInterval(() => count.value++, 1000);
+</script>
+
+<template>
+  <Transition>
+    <span :key="count">{{ count }}</span>
+  </Transition>
+</template>
+```
+
+در صورتی که اتریبیوت `key` را از کد حذف کنیم، فقط متن المنت به روز می‌شود و هیچ ترنزیشنی رخ نمی‌دهد. با این حال، با وجود اتریبیوت `key`، فریمورک Vue می‌داند که هر زمان که `count` تغییر کرد، یک عنصر `span` جدید ایجاد کند و بنابراین کامپوننت `Transition` دارای 2 عنصر مختلف برای ترنزیشن بین آن‌ها است.
+
+[آن را در Playground امتحان کنید](https://play.vuejs.org/#eNp9UsFu2zAM/RVCl6Zo4nhYd/GcAtvQQ3fYhq1HXTSFydTKkiDJbjLD/z5KMrKgLXoTHx/5+CiO7JNz1dAja1gbpFcuQsDYuxtuVOesjzCCxx1MsPO2gwuiXnzkhhtpTYggbW8ibBJlUV/mBJXfmYh+EHqxuITNDYzcQGFWBPZ4dUXEaQnv6jrXtOuiTJoUROycFhEpAmi3agCpRQgbzp68cA49ZyV174UJKiprckxIcMJA84hHImc9oo7jPOQ0kQ4RSvH6WXW7JiV6teszfQpDPGqEIK3DLSGpQbazsyaugvqLDVx77JIhbqp5wsxwtrRvPFI7NWDhEGtYYVrQSsgELzOiUQw4I2Vh8TRgA9YJqeIR6upDABQh9TpTAPE7WN3HlxLp084Foi3N54YN1KWEVpOMkkO2ZJHsmp3aVw/BGjqMXJE22jml0X93STRw1pReKSe0tk9fMxZ9nzwVXP5B+fgK/hAOCePsh8dAt4KcnXJR+D3S16X07a9veKD3KdnZba+J/UbyJ+Zl0IyF9rk3Wxr7jJenvcvnrcz+PtweItKuZ1Np0MScMp8zOvkvb1j/P+776jrX0UbZ9A+fYSTP)
 
 ---
 

src/guide/components/props.md

@@ -519,6 +519,7 @@ export default {
 - `Date`
 - `Function`
 - `Symbol`
+- `Error`
 
 علاوه بر این، «type» همچنین می‌تواند یک کلاس سفارشی یا تابع سازنده باشد و این ادعا با بررسی «instanceof» انجام می‌شود. به عنوان مثال، با توجه به کلاس زیر:
 

src/guide/essentials/watchers.md

@@ -272,6 +272,42 @@ watch(
 
 </div>
 
+
+## Once Watchers <sup class="vt-badge" data-text="3.4+" /> {#once-watchers}
+
+هر زمانی که منبع داده ناظر تغییر کند ناظر کالبک خود را فراخوانی می‌کند. اگر می‌خواهید کالبک ناظر فقط یک بار در زمان تغییر داده صدا زده شود، از آپشن `once: true` استفاده کنید.
+
+<div class="options-api">
+
+```js
+export default {
+  watch: {
+    source: {
+      handler(newValue, oldValue) {
+        // تغییر می کند، فقط یک بار فعال می‌شود `source` هنگامی که
+      },
+      once: true
+    }
+  }
+}
+```
+
+</div>
+
+<div class="composition-api">
+
+```js
+watch(
+  source,
+  (newValue, oldValue) => {
+    // تغییر می کند، فقط یک بار فعال می‌شود `source` هنگامی که
+  },
+  { once: true }
+)
+```
+
+</div>
+
 <div class="composition-api">
 
 ## `watchEffect()‎` \*\* {#watcheffect}

src/guide/extras/reactivity-in-depth.md

@@ -403,7 +403,7 @@ export function useMachine(options) {
 چندین فریمورک دیگر هم مفاهیم اولیه واکنش‌پذیری مشابه refs از Composition API Vue را با عنوان "سیگنال‌ها" معرفی کرده‌اند:
 
 - [سیگنال‌ها در Solid](https://www.solidjs.com/docs/latest/api#createsignal)
-- [سیگنال‌ها در Angular](https://github.com/angular/angular/discussions/49090)
+- [سیگنال‌ها در Angular](https://angular.io/guide/signals)
 - [سیگنال‌ها در Preact](https://preactjs.com/guide/v10/signals/)
 - [سیگنال‌ها در Qwik](https://qwik.builder.io/docs/components/state/#usesignal)
 
@@ -454,18 +454,12 @@ const count = signal(0)
 count() // دسترسی به مقدار
 count.set(1) // تنظیم مقدار جدید
 count.update((v) => v + 1) // به‌روزرسانی بر اساس مقدار قبلی
-
-// تغییر اشیاء عمیق با همان شناسه
-const state = signal({ count: 0 })
-state.mutate((o) => {
-  o.count++
-})
 ```
 
 ما می‌توانیم این API را به راحتی در Vue تکرار کنیم:
 
 ```js
-import { shallowRef, triggerRef } from 'vue'
+import { shallowRef } from 'vue'
 
 export function signal(initialValue) {
   const r = shallowRef(initialValue)
@@ -476,15 +470,11 @@ export function signal(initialValue) {
   s.update = (updater) => {
     r.value = updater(r.value)
   }
-  s.mutate = (mutator) => {
-    mutator(r.value)
-    triggerRef(r)
-  }
   return s
 }
 ```
 
-[امتحان این مورد در Playground](https://play.vuejs.org/#eNp9UslOwzAQ/ZVRLiRQEsqxpBUIvoADp0goTd3U4DiWl4AU5d8ZL3E3iZtn5r1Z3vOYvAiRD4Ykq6RUjaRCgyLaiE3FaSd6qWEERVteswU0fSeMJjuYYC/7Dm7youatYbW895D8S91UvOJNz5VGuOEa1oGePmRzYdebLSNYmRumaQbrjSfg8xYeEVsWfh/cBANNOsFqTTACKA/LzavrTtUKxjEyp6kssDZj3vygAPJjL1Bbo3XP4blhtPleV4nrlBuxw1npYLca4A6WWZU4PADljSQd4drRC8//rxfKaW+f+ZJg4oJbFvG8ZJFcaYreHL041Iz1P+9kvwAtadsS6d7Rm1rB55VRaLAzhvy6NnvDG01x1WAN5VTTmn3UzJAMRrudd0pa++LEc9wRpRDlHZT5YGu2pOzhWHAJWxvnakxOHufFxqx/4MxzcEinIYP+eV5ntOe5Rx94IYjopxOZUhnIEr+4xPMrjuG1LPFftkTj5DNJGhwYBZ4BJz3DV56FmJLpD1DrKXU=)
+[امتحان این مورد در Playground](https://play.vuejs.org/#eNp9Ul1v0zAU/SuWX9ZCSRh7m9IKGHuAB0AD8WQJZclt6s2xLX+ESlH+O9d2krbr1Df7nnPu17k9/aR11nmgt7SwleHaEQvO6w2TvNXKONITyxtZihWpVKu9g5oMZGtUS66yvJSNF6V5lyjZk71ikslKSeuQ7qUj61G+eL+cgFr5RwGITAkXiyVZb5IAn2/IB+QWeeoHO8GPg1aL0gH+CCl215u7mJ3bW9L3s3IYihyxifMlFRpJqewL1qN3TknysRK8el4zGjNlXtdYa9GFrjryllwvGY18QrisDLQgXZTnSX8pF64zzD7pDWDghbbI5/Hoip7tFL05eLErhVD/HmB75Edpyd8zc9DUaAbso3TrZeU4tjfawSV3vBR/SuFhSfrQUXLHBMvmKqe8A8siK7lmsi5gAbJhWARiIGD9hM7BIfHSgjGaHljzlDyGF2MEPQs6g5dpcAIm8Xs+2XxODTgUn0xVYdJ5RxPhKOd4gdMsA/rgLEq3vEEHlEQPYrbgaqu5APNDh6KWUTyuZC2jcWvfYswZD6spXu2gen4l/mT3Icboz3AWpgNGZ8yVBttM8P2v77DH9wy2qvYC2RfAB7BK+NBjon32ssa2j3ix26/xsrhsftv7vQNpp6FCo4E5RD6jeE93F0Y/tHuT3URd2OLwHyXleRY=)
 
 در مقایسه با refs در Vue، سبک API مبتنی بر گتر در Solid و Angular بده بستان جالبی را در استفاده در کامپوننت‌های Vue ارائه می‌دهد: