رندر کردن لیست در Vue.js – از صفر تا صد

Vue.js یک فریمورک وب‌اپلیکیشن با استفاده آسان است که می‌تواند برای توسعه اپلیکیشن‌های تعامل در سمت فرانت مورد استفاده قرار گیرد. در این مقاله به بررسی روش‌های مختلف رندر کردن لیست در Vue.js می‌پردازیم. این‌ها می‌توانند شامل رندر کردن بازه‌ای از اعداد، رندر کردن کامپوننت، قالب و موارد دیگر باشند.

v-for با یک بازه

v-for می‌تواند یک عدد صحیح برای رندر کردن یک بازه از اعداد بگیرد.

برای نمونه اگر فایل src/index.js مانند زیر داشته باشیم:

و فایل index.html به صورت زیر باشد:

در این صورت نتیجه زیر به دست می‌آید:

1 2 3 4 5 6 7 8 9 10

از v-for می‌توان برای تعریف حلقه‌ای روی عناصر template استفاده کرد. برای نمونه می‌توانیم در فایل src/index.js کدی مانند زیر بنویسیم:

و اگر در فایل index.html کدی مانند زیر داشته باشیم:

در این صورت نتیجه زیر به دست می‌آید و روی صفحه نمایش می‌یابد:

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |

v-for با v-if

در صورتی که این دو با هم استفاده شوند، v-for اولویت بالاتری نسبت به v-if خواهد داشت. با این حال نباید آن‌ها را از این جهت که v-for تقدم بالاتری نسبت به v-if دارد با هم استفاده کنیم. اگر می‌خواهید برخی عناصر را در زمان رندر کردن آیتم‌های یک آرایه فیلتر کنید، باید از یک «مشخصه محاسبه شده» (Computed Property) بهره بگیرید.

اگر تنها بخش کوچکی از عناصر یک آرایه قرار است رندر شود، باید روی کل لیست بچرخد و بررسی کند آیا عبارت مورد نظر شرایط خواسته شده را دارد یا نه. برای نمونه به کد جاوا اسکریپت و HTML زیر توجه کنید:

• فایل src/index.js

• فایل index.html

این کد چندان کارآمد نیست، زیرا هر بار که حلقه رندر می‌شود، Vue باید روی همه عناصر بچرخد و بررسی کند آیا num!== 3 مقدار true دارد یا نه. به جای آن باید از مشخصه محاسبه شده به صورت زیر استفاده کنیم.

• فایل src/index.js

• فایل index.html

کد فوق کارایی بالایی دارد، زیرا not3 تنها زمانی مجدداً محاسبه می‌شود که numbers تغییر یابد. ضمناً تنها آیتم‌های not3 در زمان رندر بررسی می‌شوند و از این رو v-for لازم نیست روی همه آیتم‌ها بچرخد. همچنین منطق کمتری در قالب وجود دارد و موجب می‌شود که تمیز بماند و نگهداری کد آسان‌تر باشد.

با انتقال v-if به عنصر والدی که v-for دارد می‌توانیم مزیت‌های عملکردی بیشتری نیز به دست آوریم، زیرا هر آنچه درون آن است تنها زمانی رندر مجدد می‌شود که شرط مورد نظر برقرار باشد. به مثال زیر توجه کنید:

• فایل src/index.js

• فایل index.html

در این حالت هیچ چیز رندر نمی‌شود، زیرا show به صورت false است. Vue نیازی به بررسی عناصر داخلی ندارد. این وضعیت بسیار بهتر است:

در کد فوق Vue باید روی همه مداخل بچرخد و بررسی کنید آیا شرط در v-if مقدار درستی بازگشت می‌دهد یا نه. همچنان که می‌بینیم با این که کد تفاوت اندکی یافته است، اما عملکرد به میزان زیادی ارتقا یافته است.

v-for با یک کامپوننت

از v-for می‌توان روی کامپوننت‌های سفارشی مانند دیگر عناصر استفاده کرد. برای نمونه می‌توانیم کدی مانند زیر بنویسیم:

• فایل src/index.js

• فایل index.html

که نتیجه زیر را به دست می‌دهد:

12345

توجه کنید که خصوصیت key: ارائه شده است. این خصوصیت از Vue نسخه 2.2.0 الزامی است. ضمناً با نوشتن کد زیر یک num به درون مشخصه num کامپوننت num ارسال کرده‌ایم:

بدین ترتیب می‌توانیم هر چه می‌خواهیم درون کامپوننت تزریق کنیم و تزویج بین آن‌ها را کاهش دهیم.

سخن پایانی

امکان رندر کردن بازه‌ای از اعداد با v-for وجود دارد و به این منظور باید به جای آرایه یا یک شیء، اعداد ارائه شوند. v-for و v-if نباید با هم استفاده شوند، چون v-if الزامی به اجرا در هر بار تکرار ندارد و می‌توان تعداد آیتم‌هایی که قرار است در حلقه قرار گیرند را کاهش داد. ضمناً می‌توانیم روی یک قالب و کامپوننت با v-for مانند هر عنصر دیگری بچرخیم.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های JavaScript (جاوا اسکریپت)
• مجموعه آموزش‌های برنامه‌‌نویسی
• آموزش جاوا اسکریپت (JavaScript)
• آموزش Vue.js — مجموعه مقالات مجله فرادرس
• آموزش Vue.js: مدیریت URL با Vue Router — بخش دهم و پایانی

==