متوقف کردن یک Watcher

‏Watcher**هایی که به‌صورت هم‌زمان (synchronous) درون تابع `setup()` یا در قالب `<script setup>` تعریف می‌شوند، به نمونه (instance) کامپوننت مالک وابسته هستند و به‌طور خودکار هنگام **unmount شدن آن کامپوننت متوقف خواهند شد. در اغلب موارد، نیازی نیست نگران متوقف کردن دستی آن‌ها باشید.

نکته‌ی کلیدی در این‌جاست که Watcher باید به‌صورت هم‌زمان ایجاد شود؛ اگر Watcher در یک تابع غیرهم‌زمان (asynchronous) مانند setTimeout ایجاد گردد، دیگر به کامپوننت والد وابسته نخواهد بود و باید به‌صورت دستی متوقف شود تا از نشت حافظه (memory leak) جلوگیری شود. به مثال زیر توجه کنید:

<script setup>
import { watchEffect } from 'vue'

// این Watcher به‌صورت خودکار متوقف خواهد شد
watchEffect(() => {})

// ...اما این یکی نه!
setTimeout(() => {
  watchEffect(() => {})
}, ۱۰۰)
</script>

برای متوقف کردن دستی یک Watcher**، می‌توان از تابع بازگشتی استفاده کرد. این روش هم برای `watch` و هم برای `watchEffect` کاربرد دارد:

const unwatch = watchEffect(() => {})

// ...در زمانی دیگر، زمانی که دیگر نیازی نیست
unwatch()

توجه داشته باشید که تنها در موارد بسیار محدود نیاز به ایجاد **Watcher به‌صورت غیرهم‌زمان وجود دارد، و در هر زمان ممکن، بهتر است از ایجاد هم‌زمان استفاده شود.

اگر نیاز دارید منتظر داده‌ای غیرهم‌زمان بمانید، می‌توانید منطق Watcher خود را مشروط طراحی کنید:

// داده‌ای که به‌صورت غیرهم‌زمان بارگذاری می‌شود
const data = ref(null)

watchEffect(() => {
  if (data.value) {
    // انجام عملیات زمانی که داده بارگذاری شد
  }
})

#️⃣#tip #vue
👥@IR_javascript_group
🆔@IR_javascript

در هنگام استفاده از router-view همراه با transition و تعیین `mode="out-in"`، در حالت توسعه (dev mode)، هنگام جابه‌جایی بین مسیرها (routes) اغلب با مشکل نمایش صفحه سفید مواجه می‌شویم.

تنها راه‌حل مؤثری که تاکنون یافته شده، غیرفعال کردن این حالت (mode) در زمان توسعه است.

نمونه‌ای از کد مربوطه:

<router-view v-slot="{ Component }">
  <Transition mode="out-in">
    <component :is="Component" />
  </Transition>
</router-view>

در این وضعیت، پیشنهاد می‌شود برای جلوگیری از بروز مشکل، در محیط توسعه از مقدار پیش‌فرض mode یا از حالت‌هایی مانند "in-out" یا بدون مشخص‌کردن mode استفاده شود و تنها در محیط تولید (production) از حالت out-in بهره بگیرید، چرا که این حالت در محیط توسعه ممکن است باگ‌هایی مانند نمایش صفحه سفید موقت ایجاد کند.



#️⃣#tip #vue
👥@IR_javascript_group
🆔@IR_javascript