# 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:
            
            ```html
            <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:
            
            ```html
            <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:
        
        ```html
        <p ref="p">hello</p>
        ```
        
        ```javascript
        // stored as this.$refs.p
        this.$refs.p
        ```
        
    * Composition API'de, referans aynı isimle bir `ref` içinde saklanır:
        
        ```xml
        <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:
        
        ```html
        <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:
        
        ```html
        <table>
          <tr is="vue:my-row-component"></tr>
        </table>
        ```
        

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