ویژگی‌های خاص ساخته شده ​

key ​

ویژگی خاص key به عنوان یک راهنما برای الگوریتم DOM مجازی Vue استفاده می‌شود تا هنگام تفاوت‌یابی لیست جدید نودها با لیست قدیمی، vnodes را شناسایی کند.

• انتظارات: number | string | symbol

• جزئیات

  بدون Vue ، Key از یک الگوریتم استفاده می‌کند که حرکت عناصر را به حداقل می‌رساند و سعی می‌کند عناصر هم نوع را تا حد امکان در جای خود ترمیم/باز استفاده کند. با key، این عناصر را بر اساس تغییر ترتیب keyها مرتب می‌کند و عناصری که دارای keyهایی هستند که دیگر وجود ندارند، همیشه حذف / نابود می‌شوند.

  فرزندان یک والد مشترک باید دارای key های منحصر به فرد باشند. key های تکراری باعث خطاهای رندر می‌شوند.

  رایج‌ترین مورد استفاده این ویژگی، همراه با v-for است:

  template

  <ul>
    <li v-for="item in items" :key="item.id">...</li>
  </ul>

  این ویژگی را میتوان برای اجبار جایگزینی یک عنصر/کامپوننت به جای باز استفاده از آن نیز استفاده کرد. این می‌تواند زمانی مفید باشد که شما بخواهید:

  • به درستی هوک های چرخه حیات یک کامپوننت را فعال کنید
  • ترنزیشن را فعال کنید

برای مثال:

<transition>
  <span :key="text">{{ text }}</span>
</transition>

وقتی text تغییر کند، همیشه المنت <span> جایگزین می‌شود به جای اینکه صرفا متن آن تغییر کند، بنابراین ترنزیشین فعال می‌شود.

• همچنین ببینید راهنما - لیست رندرینگ - حفظ state با key

ref ​

یک ارجاع از طریق تمپلیت را نشان می‌دهد.

• انتظارات: string | Function

• جزئیات

  ref برای ثبت یک ارجاع به یک عنصر یا یک کامپوننت فرزند استفاده می‌شود.

  در Option API ارجاع تحت آبجکت this.$refs‎ کامپوننت ثبت می‌شود:

  template

  <!-- stored as this.$refs.p -->
  <p ref="p">hello</p>

  در Composition API، ارجاع در یک ref با نام منطبق ذخیره می‌شود:

  vue

  <script setup>
  import { useTemplateRef } from 'vue'
  
  const pRef = useTemplateRef('p')
  </script>
  
  <template>
    <p ref="p">hello</p>
  </template>

  اگر از این ویژگی روی یک عنصر DOM ساده استفاده شود، ارجاع همان عنصر خواهد بود؛ اگر روی یک کامپوننت فرزند استفاده شود، ارجاع نمونه ساخته شده از کامپوننت فرزند خواهد بود.

  به طور جایگزین ref میتواند یک مقدار تابعی را بپذیرد که کنترل کاملی روی اینکه کجا رفرنس دریافت شده را ذخیره کنید، فراهم می‌کند:

  template

  <ChildComponent :ref="(el) => child = el" />

  یک نکته مهم در مورد زمان ثبت ref این است که چون ref ها خودشان به عنوان نتیجه تابع رندر ایجاد می‌شوند، شما باید تا زمانی که کامپوننت mount شود، صبر کنید تا به آنها دسترسی پیدا کنید.

  this.$refs همچنین reactive نیست، بنابراین شما نباید سعی کنید که از آن در تمپلیت‌ها برای اتصال دادن داده استفاده کنید.

• همچنین ببینید

  • راهنما - تمپلیت مراجع
  • راهنما - نوع تمپلیت مراجع
  • راهنما - نوع کامپوننت تمپلیت مراجع

is ​

برای اتصال کامپوننت های داینامیک استفاده میشود.

• انتظارات: string | Component

• استفاده در عناصر بومی

  • فقط در 3.1+ پشتیبانی می‌شود

  وقتی ویژگی is روی یک عنصر HTML بومی استفاده شود، به عنوان یک عنصر سفارشی ساخته شده تفسیر می‌شود، که یک ویژگی بومی پلتفرم وب است.

  اما یک مورد استفاده وجود دارد که شما ممکن است نیاز داشته باشید که Vue یک عنصر بومی را با یک کامپوننت Vue جایگزین کند، که در محدودیت‌های تجزیه تمپلیت در DOM توضیح داده شده است. شما میتوانید مقدار ویژگی is را با vue:‎ پیشوند کنید تا Vue عنصر را به عنوان یک کامپوننت Vue رندر کند:

  template

  <table>
    <tr is="vue:my-row-component"></tr>
  </table>

• همچنین ببینید

  • عنصر خاص ساخته شده - <component>
  • کامپوننت های داینامیک