VueJS'te Dahili Özel Nitelikler ('ref', 'key' ve 'is')

key

key özel niteliği, Vue'nun sanal DOM algoritmasına yeni düğüm listesini eski düğüm listesiyle karşılaştırırken düğümleri tanımlaması için bir ipucu verir.

• Beklenen Tipler: sayı | string | sembol

• Detaylar:

  • Anahtarlar olmadan, Vue, eleman hareketini en aza indiren ve aynı türdeki elemanları mümkün olduğunca yerinde düzeltmeye çalışan bir algoritma kullanır.

  • Anahtarlarla, elemanları anahtarların sırasına göre yeniden sıralar ve artık mevcut olmayan anahtarlara sahip elemanları her zaman kaldırır veya yok eder.

  • Aynı ebeveynin çocukları benzersiz anahtarlara sahip olmalıdır. Yinelenen anahtarlar render hatalarına neden olur.

  • Kullanım:

    • Genellikle v-for ile kullanılır:

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

    • Ayrıca bir elemanın veya bileşenin yeniden kullanılmak yerine değiştirilmesini zorlamak için de kullanılabilir:

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

      Metin değiştiğinde, <span> her zaman yamalanmak yerine değiştirilecek, bu yüzden bir geçiş tetiklenecek.

ref

ref, bir elemana veya alt bileşene bir referans kaydetmek için kullanılır.

• Beklenen Tipler: string | fonksiyon

• Detaylar:

  • Options API'de, referans bileşenin this.$refs nesnesi altında kaydedilir:

      <p ref="p">hello</p>
    

      // stored as this.$refs.p
      this.$refs.p
    

  • Composition API'de, referans aynı isimle bir ref içinde saklanır:

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

  • Alternatif olarak, ref bir fonksiyon değeri kabul edebilir ve bu, referansın nerede saklanacağı konusunda tam kontrol sağlar:

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

  • Referans kaydının zamanlaması önemlidir: referanslara erişmeden önce bileşenin monte edilmesini beklemelisiniz.

  • this.$refs reaktif değildir, bu yüzden veri bağlama için şablonlarda kullanmamalısınız.

is

is, dinamik bileşenleri bağlamak için kullanılır.

• Beklenen Tipler: string | bileşen

• Detaylar:

  • is niteliği bir doğal HTML elemanı üzerinde kullanıldığında, bu, doğal bir web platformu özelliği olan özelleştirilmiş yerleşik eleman olarak yorumlanacaktır.

  • Ancak, Vue'nun doğal bir elemanı bir Vue bileşeni ile değiştirmesi gerektiği bir kullanım durumu vardır. is niteliğinin değerinin önüne vue: ekleyebilirsiniz:

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

• Kaynak:

  %[https://vuejs.org/api/built-in-special-attributes.html#key]