Vue — ویژگی 'key' ('key' Attribute)

آخرین بروزرسانی: 1404/08/21

قبلی: ویژگی 'is' ('is' Attribute) بعدی: ویژگی 'ref' ('ref' Attribute)

ویژگی 'key' ('key' Attribute)

در Vue، ویژگی key شناسه یکتا می دهد. بنابراین Vue هر آیتم را درست می شناسد. سپس هنگام تغییر آرایه، اشتباه جابه جایی پیش نمی آید. این کار با v-for خیلی مهم است.

تعریف و کاربرد ویژگی key

ویژگی key کنار v-for می آید تا Vue عناصر را از هم تشخیص دهد. چون Vue برای سرعت، عناصر را گاهی «بازاستفاده» می کند. بدون key، داده ها قاطی می شوند.

نمونه رسمی: key روی کامپوننت های تکرارشونده

&lt;food-item
  v-for="x in foods"
  :key="x.name"
  :food-name="x.name"
  :food-desc="x.desc"
  :is-favorite="x.favorite"
/&gt;

مشاهده در ادیتور

نکته: همیشه key را یکتا انتخاب کن؛ مثل id یا نام یکتا. مقدار تکراری، باگ می سازد.

گام های عملی استفاده از ویژگی key

لیست را با v-for رندر کن.
برای هر آیتم یک مقدار یکتا پیدا کن.
:key را به همان مقدار وصل کن.

جمع بندی سریع

ویژگی key، شناسه یکتای هر آیتم است.
بدون key، داده ها ممکن است قاطی شوند.
مقدار تکراری برای key مشکل ساز است.
کنار v-for همیشه key بگذار.

برای ادامه مرتبط: انیمیشن با v-for، ویژگی های توکار، و مرور همین صفحه با لنگر ویژگی key.