VueJS Özel Nitelikler: 'ref', 'key', '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]

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

Comments

VueJS

VueJS'te 'v-bind' direktifi nasıl çalışır?

More from this blog

VueJS'te 'v-bind' direktifi nasıl çalışır?

SQL Temel Kavramları

Temel 'Git' Komutları

C++ Dilinde Kaçış Karekteri "\" (Ters Slash) Kullanımı

`key`

`ref`

`is`

Command Palette

Comments

VueJS

VueJS'te 'v-bind' direktifi nasıl çalışır?

More from this blog

key

ref

is

`key`

`ref`

`is`