diff --git a/src/guide/built-ins/transition.md b/src/guide/built-ins/transition.md index 79177042..df27ee3d 100644 --- a/src/guide/built-ins/transition.md +++ b/src/guide/built-ins/transition.md @@ -581,7 +581,32 @@ export default { همچنین می‌توانید بر اساس state فعلی کامپوننت خود، رفتار مختلف را در هوک‌های ترنزیشن JavaScript اعمال کنید. در نهایت، راه حقیقی ایجاد ترنزیشن‌های پویا از طریق [کامپوننت‌های انتقال قابل استفاده مجدد](#reusable-transitions) است که پراپ‌ها را برای تغییر خصوصیات ترنزیشن(ها) مورد استفاده، دریافت می‌کنند. -ممکن است خنده دار به نظر برسد، اما واقعاً تنها محدودیت، خلاقیت شماست. +ممکن است خنده دار به نظر برسد، اما تنها محدودیت، خلاقیت شماست. + +## ترنزیشن با اتریبیوت key {#transitions-with-the-key-attribute} + +گاهی اوقات شما نیاز دارید که یک عنصر DOM را دوباره رندر کنید تا یک ترنزیشن رخ دهد. + +برای مثال این کامپوننت شمارنده را در نظر بگیرید. + +```vue + + + +``` + +در صورتی که اتریبیوت `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) --- diff --git a/src/guide/components/props.md b/src/guide/components/props.md index 13b855fe..39528268 100644 --- a/src/guide/components/props.md +++ b/src/guide/components/props.md @@ -519,6 +519,7 @@ export default { - `Date` - `Function` - `Symbol` +- `Error` علاوه بر این، «type» همچنین می‌تواند یک کلاس سفارشی یا تابع سازنده باشد و این ادعا با بررسی «instanceof» انجام می‌شود. به عنوان مثال، با توجه به کلاس زیر: diff --git a/src/guide/essentials/watchers.md b/src/guide/essentials/watchers.md index c0f26076..c26ebcbc 100644 --- a/src/guide/essentials/watchers.md +++ b/src/guide/essentials/watchers.md @@ -272,6 +272,42 @@ watch( + +## Once Watchers {#once-watchers} + +هر زمانی که منبع داده ناظر تغییر کند ناظر کالبک خود را فراخوانی می‌کند. اگر می‌خواهید کالبک ناظر فقط یک بار در زمان تغییر داده صدا زده شود، از آپشن `once: true` استفاده کنید. + +
+ +```js +export default { + watch: { + source: { + handler(newValue, oldValue) { + // تغییر می کند، فقط یک بار فعال می‌شود `source` هنگامی که + }, + once: true + } + } +} +``` + +
+ +
+ +```js +watch( + source, + (newValue, oldValue) => { + // تغییر می کند، فقط یک بار فعال می‌شود `source` هنگامی که + }, + { once: true } +) +``` + +
+
## `watchEffect()‎` \*\* {#watcheffect} diff --git a/src/guide/extras/reactivity-in-depth.md b/src/guide/extras/reactivity-in-depth.md index a02af61c..46b5dc4e 100644 --- a/src/guide/extras/reactivity-in-depth.md +++ b/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 ارائه می‌دهد: