v-memo (v-memo)
اینجا درباره «بهینه سازی v-memo ویو» حرف می زنیم. «بهینه سازی (Optimization)» یعنی سریع تر کردن کار. «بازرندر (Rerender)» یعنی دوباره سازی بخش های صفحه. با v-memo می گوییم تا وقتی کلیدها عوض نشدند، دوباره سازی نشود.
v-memo چیست و چه زمانی مفید است؟
v-memo دستور (Directive) مخصوص سرعت است. کنار یک «آرایه (Array)» از ویژگی ها می آید. تا وقتی هیچ کدام تغییر نکنند، عنصر و زیربخش ها دوباره رندر نمی شوند. این کار بیشتر در لیست های بزرگ با v-for ارزشمند است.
نکته: اگر آرایه v-memo خالی باشد، مثل v-once عمل می کند. یعنی همان بار اول رندر می شود و دیگر تغییر نمی کند.
نمونه اصلی: رندر فقط هنگام تغییر کلید
در این مثال، فقط وقتی updateProp عوض شود، هر آیتم دوباره سازی می شود. مثل مدرسه؛ تا وقتی نمره تغییر نکند، کارنامه چاپ نمی شود.
<div id="app">
<div
v-for="x in circle"
:style="{ backgroundColor: x.color }"
v-memo="[updateProp]"
></div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
circle: [
{ color: 'red' },
{ color: 'green' },
{ color: 'blue' }
],
updateProp: 0
};
}
});
app.mount('#app');
<\/script>
حالت خاص: مثل v-once با آرایه خالی
وقتی آرایه v-memo خالی باشد، دقیقاً مثل v-once رفتار می کند. یعنی فقط یک بار رندر می شود. مانند بازی؛ اسکرین شات می گیری و دیگر تغییر نمی کند.
<div id="app">
<p v-memo="[]">This paragraph renders only once.</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {};
}
});
app.mount('#app');
<\/script>
گام های عملی سریع
- ابتدا لیست را با
v-forبساز. - کلیدهای اثرگذار را در آرایه
v-memoبگذار. - فقط با تغییر همین کلیدها، رندر انجام می شود.
- برای منجمدسازی کامل، از
v-memo=[]بهره ببر.
برای لیست ها به v-for سر بزن. برای حالت تک بار هم صفحه v-once را ببین. همچنین این لینک داخلی با کلیدواژه ماست: بهینه سازی v-memo ویو.
جمع بندی سریع
v-memoبرای سرعت در رندر است.- در لیست های بزرگ بیشتر می درخشد.
- کلیدها را در آرایه تعیین کن.
[]یعنی رفتار شبیهv-once.- ترتیب و سادگی را حفظ کن.