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

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>