Vue.js Hesaplanmış Özelliklerine İlişkin Basit Bir Kılavuz

Vue.js, bileşeninizin durumundan hesaplamalar yapmanıza ve veri türetmenize olanak tanıyan hesaplanan özellikler adlı güçlü bir özellik sunar. Hesaplanan özellikler, şablon kodunuzu temiz ve okunabilir tutarken reaktif veri özelliklerine dayalı karmaşık hesaplamalar veya dönüşümler yapmak istediğinizde özellikle yararlıdır.

Bu kılavuzda, Vue.js'deki hesaplanan özelliklerin temellerini, bunların yöntemlerden nasıl farklı olduğunu ve bunları Vue bileşenlerinizde nasıl etkili bir şekilde kullanabileceğinizi inceleyeceğiz.

Hesaplanan Özellikler Nelerdir?

Hesaplanan özellikler, bir Vue bileşeninin computed nesnesi içinde tanımlanan işlevlerdir. Yöntemlerin aksine, hesaplanan özellikler bağımlılıklarına göre önbelleğe alınır. Bu, yalnızca bağımlılıklarından biri değiştiğinde yeniden değerlendirilecekleri anlamına gelir ve bu da onları pahalı işlemler için daha verimli hale getirir.

İşte hesaplanmış bir özelliği kullanan bir Vue bileşeninin temel bir örneği:

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

Bu örnekte, fullName hesaplanmış özelliği, tam bir ad döndürmek için firstName ve lastName veri özelliklerini birleştirir. fullName hesaplanmış bir özellik olduğundan, firstName veya lastName değiştiğinde otomatik olarak güncellenir.

Hesaplanan Özellikler ve Yöntemler

İlk bakışta, hesaplanan özellikler yöntemlere benzer görünebilir, çünkü her ikisi de hesaplamalar yapmak ve sonuçları döndürmek için kullanılabilir. Ancak, ikisi arasında önemli bir fark vardır:

• Yöntemler: Yöntemler her çağrıldığında yeniden değerlendirilir. Bu, sonuçları önbelleğe almadıkları ve hesaplama açısından pahalıysa daha az verimli olabilecekleri anlamına gelir.
• Hesaplanan Özellikler: Hesaplanan özellikler, bağımlılıklarına göre önbelleğe alınır ve yalnızca bu bağımlılıklar değiştiğinde yeniden değerlendirilir. Bu, pahalı hesaplamalar yaptığınız senaryolar için onları daha verimli hale getirir.

Örneğin, tam ad hesaplaması için hesaplanmış bir özellik yerine bir yöntem kullansaydık, şablon her oluşturulduğunda çağrılırdı. Hesaplanmış bir özellik ile, yalnızca bağımlılıklarından biri değiştiğinde yeniden hesaplanır.

Hesaplanan Özelliklerle Getter ve Setter'ları Kullanma

Hesaplanan özellikler ayrıca getters ​​ve setters ​​öğelerine sahip olabilir. Varsayılan olarak, hesaplanan özellikler yalnızca bir getter'a sahiptir, ancak veri güncellemelerini işlemek için bir setter ekleyebilirsiniz.

İşte hem getter hem de setter içeren hesaplanmış bir özelliğin örneği:

<template>
  <div>
    <p>Full Name: {{ fullName }}</p>
    <input v-model="fullName" placeholder="Enter your full name" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + ' ' + this.lastName;
      },
      set(value) {
        const names = value.split(' ');
        this.firstName = names[0];
        this.lastName = names[names.length - 1];
      }
    }
  }
};
</script>

Bu örnekte, fullName hesaplanan özelliğinin, tam adı döndüren bir alıcısı ve girilen adı bölen ve firstName ve lastName veri özelliklerini güncelleyen bir ayarlayıcısı vardır.

Hesaplanan Özelliklerde Reaktivite

Hesaplanan özellikler reaktiftir ve bağımlılıkları değiştiğinde otomatik olarak güncellenir. Örneğin, firstName veya lastName değerini değiştirirseniz, fullName hesaplanan özelliği yeni değeri yansıtacak şekilde otomatik olarak güncellenir.

Bu tepkimeyi gösteren bir örnek şöyledir:

<template>
  <div>
    <p>First Name: {{ firstName }}</p>
    <p>Full Name: {{ fullName }}</p>
    <button @click="firstName = 'Jane'">Change First Name to Jane</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

Bu örnekte, düğmeye tıklandığında firstName özelliği "Jane" olarak değişir ve fullName hesaplanan özelliği otomatik olarak "Jane Doe" olarak güncellenir.

Hesaplanan Özellikleri Kullanmak İçin En İyi Uygulamalar

• Reaktif verilere dayanan pahalı hesaplamalar için hesaplanmış özellikleri kullanın.
• Hesaplanan özellikleri basit tutun ve değer döndürmeye odaklanın.
• Hesaplanan özelliklerde yan etkilerden kaçının; eylem gerçekleştirmeniz gerekiyorsa bunun yerine yöntemleri kullanın.
• Hem veri okuma hem de yazma işlemlerini yapmanız gerektiğinde hesaplanan özellikler için getter ve setter'ları kullanın.
• Hesaplanan özelliklerin bağımlılıklarının reaktif olduğundan emin olun; aksi takdirde doğru şekilde güncellenmezler.

Çözüm

Hesaplanan özellikler, kodunuzu temiz, verimli ve bakımı kolay tutmanıza olanak tanıyan Vue.js'nin güçlü bir özelliğidir. Diğer reaktif özelliklerden veri türetmenize ve bağımlılıklar değiştiğinde otomatik olarak güncellemenize yardımcı olurlar. Hesaplanan özellikleri etkili bir şekilde nasıl kullanacağınızı anlayarak, daha sağlam ve performanslı Vue.js uygulamaları oluşturabilirsiniz.