v-once (v-once)
می خواهیم «دستور v-once ویو» را یاد بگیریم. «رندر (Render)» یعنی ساخت خروجی HTML از داده. با v-once یک عنصر فقط یک بار رندر می شود. سپس دیگر به تغییرات واکنش نمی دهد.
تعریف و کاربرد v-once
v-once یعنی عنصر و همه فرزندانش پس از اولین رندر، ثابت می مانند. بنابراین، کارایی بهتر می شود. اگر فقط یک بار نمایش کافی است، از آن استفاده کن. برای «کنترل تعداد رندر» در حالت های پیچیده تر، می توان از v-memo کمک گرفت.
نمونه کد دستور v-once ویو
اینجا تصویر فقط یک بار رندر می شود. تغییر منبع تصویر اثری ندارد.
<template>
<h1>v-once Example</h1>
<p>The image is only rendered once. Changing the image source does not have any effect.</p>
<img v-once v-bind:src="imgUrl[imgIndex]">
<p>Img src: '{{ imgUrl[imgIndex] }}'</p>
<button v-on:click="changeImg">Change image</button>
</template>
چه زمانی v-once مناسب است؟
برای متن یا تصویر ثابت عالی است. برای هدرهای بدون تغییر خوب است. برای لیست های بزرگ ثابت هم مفید است.
گام های عملی
- ببین آیا محتوا واقعاً تغییر نمی کند.
- روی عنصر هدف، ویژگی
v-onceبگذار. - اگر گاهی نیاز به تغییر داری، از v-memo کمک بگیر.
- برای رویدادها و تغییرات، v-on را استفاده کن.
نکته: برای سئو داخلی، از لینک «دستور v-once ویو» در صفحات مرتبط استفاده کن.
جمع بندی سریع
v-onceفقط یک بار رندر می کند.- فرزندان هم ثابت می شوند.
- کارایی پروژه بهتر می شود.
- برای کنترل انعطاف پذیر،
v-memoرا ببین.