افزایش پرفورمنس وب اپلیکیشنهای ویو با دایرکتیو 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
این دایرکتیو (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
🤩5👍4🔥3