افزایش پرفورمنس وب اپلیکیشن‌های ویو با دایرکتیو v-momo
این دایرکتیو (directive) جدید که از نسخه ۳.۲ به ویو اضافه شده از رندرهای اضافی کامپوننت‌ها و المنت‌های HTML و تمامی subtree‌های اون‌ها در ویو جلوگیری می‌کنه.

شما باید این دایرکتیو رو با یک آرایه با طول ثابت مقداردهی کنید و هر موقع که هر کدوم از آیتم‌های داخل این آرایه تغییر کنه، کامپوننت یا المنت مربوطه هم دوباره رندر میشه اما اگر ثابت بمونه، اون کامپوننت و یا المنت و subtreeهای داخلش دوباره رندر نمیشن

در واقع قدرت واقعی این دایرکتیو اونجایی مشخص میشه که شما یک لیست بزرگ یا حجم زیادی از کامپوننت‌هایی دارید که با یک تغییر، همشون دوباره رندر میشن و خب این اصلا جالب نیست.

نحوه استفاده از این دایرکتیو خیلی ساده هست:
<div v-memo="[valueA, valueB]">
...
</div>

برای اطلاعات کامل‌تر و همینطور نحوه استفاده از این دایرکتیو در کنار v-for به لینک زیر مراجعه کنید:
https://v3.vuejs.org/api/directives.html

#نویسنده : #محمد_صالح_فدایی

لینک گروه ：
https://t.me/ir_vuejs
لینک کانال ：
https://telegram.me/vue_js

#vue #v_memo #tips

استفاده از watch برای مشاهده تغییرات دو (یا چند) property در option API

با کمک یک computed property، که یک آبجکت شامل متغیرهای مورد نظرتون رو برمی‌گردونه، می‌تونید از یک watch برای مشاهده تغییرات در دو (یا چند) متغیر استفاده کنید.
استفاده از این روش علاوه بر مزیت ذکر شده، خوانایی کدهاتون رو هم افزایش میده.

پی نوشت: در composition API، بدون کمک گرفتن از computed می‌تونید تغییرات چندین property رو به صورت همزمان مشاهده کنید.

نویسنده: #محمد_صالح_فدایی

با دوستان خود به اشتراک بگذارید....
بزرگترین گروه و کانال توسعه دهندگان vuejs و nuxtjs در ایران

لینک گروه ：
https://t.me/ir_vuejs
لینک کانال ：
https://telegram.me/vue_js

#vue #tips #watch

جلوگیری از دسترسی به داده‌ها و متدهای داخل کامپوننت با استفاده از expose

به صورت پیشفرض، شما در ویو می‌تونید با استفاده از refs$ یا parent$ یا root$ به instance کامل یک کامپوننت دیگه دسترسی داشته باشین.

اما اگر زمانی ترجیح دادین که امکان دسترسی به پراپرتی‌ها، متدها و... رو در خارج از کامپوننت کنترل و محدود کنید، کافیه که با استفاده از آپشن expose اون مواردی که میخواید قابل دسترسی باشه رو مشخص کنید. این قابلیت رسما از ویو ۳.۲ اضافه شده.

اینکار باعث میشه که encapsulation بهتری داشته باشیم و کامپوننت‌مون قابلیت اطمینان بیشتری داشته باشه.

برای جزئیات بیشتر میتونین لینک زیر رو بخونین:
https://v3.vuejs.org/api/options-data.html#expose

پی‌نوشت: در کل دسترسی مستقیم به instance یک کامپوننت دیگه، bad practice هست و بهتره که اینکار انجام نشه و به جای اون از پترن‌های دقیق‌تر و درست‌تر استفاده کنیم.

مثالی میشناسین که ما در اون مجبور به استفاده از ref$ یا parent$ یا root$ بشیم و هیچ راه دیگه یا پترن خوب جایگزین نداشته باشه؟

نویسنده: #محمد_صالح_فدایی

لینک گروه :
https://t.me/ir_vuejs
لینک کانال :
https://t.me/vue_js

اجرای دستی همه effectهای وابسته به shallowRef

همونطور که می‌دونین، هر وقت یک ref آپدیت میشه تمامی watchها، computedها و... وابسته به اون دوباره اجرا میشن تا تمامی stateهای مرتبط به صورت دومینو وار آپدیت بشن (به این وابستگی‌ها میگن effects).

اما زمانی که از shallowRef استفاده بشه، هر زمان یکی از propertyهای داخلی آبجکت مربوط بهش تغییر کنه، هیچ افکتی دوباره اجرا نمیشه. دلیل این امر اینه که از shallowRef استفاده شده و propertyهای داخلی reactive نیستن و با تغییرشون هیچ effectی اجرا نمیشه.

اگر بخواید که این effectها دوباره اجرا بشن، باید اون‌ها رو به صورت دستی و توسط triggerRef دوباره اجرا کنید.

پی‌نوشت: triggerRef رو هم میشه با ref استفاده کرده اما نیازی به اینکار نیست و ویو به طور خودکار تمامی effectهای مرتبط رو براتون دوباره اجرا می‌کنه.

Reference:
https://v3.vuejs.org/api/refs-api.html#triggerref

نویسنده #محمد_صالح_فدایی

با دوستان خود به اشتراک بگذارید....
بزرگترین گروه و کانال توسعه دهندگان vuejs و nuxtjs در ایران

لینک گروه ：
https://t.me/ir_vuejs
لینک کانال ：
https://telegram.me/vue_js

#vue #tips

متوقف کردن اجرای watch و watchEffect در Composition API

جالبه بدونین که watch و watchEffect یک تابع به عنوان تابع متوقف کننده برمی‌گردونن. تنها کافیه این تابع رو فراخوانی کنید تا watcher مورد استفاده متوقف بشه و بعد هر تغییر اجرا نشه.

Reference:
https://v3.vuejs.org/guide/reactivity-computed-watchers.html#stopping-the-watcher

نویسنده: #محمد_صالح_فدایی

با دوستان خود به اشتراک بگذارید....
بزرگترین گروه و کانال توسعه دهندگان vuejs و nuxtjs در ایران

لینک گروه ：
https://t.me/ir_vuejs
لینک کانال ：
https://telegram.me/vue_js

#vue #tips #watch