Vue Academy · Ders

Hesaplanmış Özellikler

computed özellikleriyle önbelleğe alınmış reaktif değerler türetin.

Hesaplanmış Özellikler, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 3 dersten oluşur.

Hesaplanan Özellik Nedir?

Hesaplanan özellik, diğer reaktif verilerden bir değer türetir.

Yalnızca bağımlılıkları değiştiğinde yeniden hesaplanır
Şablonlarda normal bir özellik gibi okunur
Mantığı JS'e taşıyarak şablonları temiz tutar

Hesaplanan Özellik Tanımlama

Composition API'de computed işlevini kullanın.

import { ref, computed } from "vue"

const firstName = ref("Ada")
const lastName = ref("Lovelace")

const fullName = computed(() => {
  return firstName.value + " " + lastName.value
})

Şablonda Hesaplanan Özellik Kullanma

Hesaplanan özelliğe, parantez kullanmadan bir veri özelliği gibi erişilir.

<template>
  <p>{{ fullName }}</p>
</template>

<!-- fullName updates automatically when
     firstName or lastName change -->

Hesaplanan Özellikler ve Yöntemler

Bir yöntem de değer döndürür; öyleyse neden computed kullanalım?

Hesaplanan özellik, bağımlılıklarına göre önbelleğe alınır
Bir yöntem, oluşturma sırasında her çağrıldığında çalışır

Hesaplanan özellik, tekrar tekrar kullanılan türetilmiş değerler için daha verimlidir.

Önbelleğe Alma İş Başında

Bir hesaplanan özellik yalnızca bir bağımlılık değiştiğinde yeniden çalışır. Birden çok kez okursanız önbelleğe alınan sonuç yeniden kullanılır.

const expensive = computed(() => {
  console.log("computing...")
  return heavyCalculation(data.value)
})

// Reading expensive twice in one render
// logs "computing..." only once

Yöntemler Her Seferinde Çalışır

Buna karşılık bir yöntem, girdiler değişmemiş olsa bile her çağrıda yeniden hesaplanır.

// In template: {{ getTotal() }} {{ getTotal() }}
// Calls getTotal twice, recomputing both times

methods: {
  getTotal() {
    return this.price * this.qty
  }
}

Seçenekler API'sinde computed

Seçenekler API'si, hesaplanan özellikleri bir computed bloğunda bildirir.

export default {
  data() {
    return { price: 10, qty: 3 }
  },
  computed: {
    total() {
      return this.price * this.qty
    }
  }
}

Hesaplanan Özellik Alıcıları

Varsayılan olarak hesaplanan özellik salt okunurdur: yalnızca bir alıcısı vardır.

Bağımlılıklar değiştiğinde alıcı, değeri oluşturmak için çalışır.

const doubled = computed(() => count.value * 2)

// You can read doubled.value
// but assigning to it would warn

Hesaplanan Özellik Ayarlayıcıları

Hem get hem de set işlevi sağlayarak hesaplanan bir özelliği yazılabilir hâle getirebilirsiniz.

const fullName = computed({
  get() {
    return first.value + " " + last.value
  },
  set(newValue) {
    const parts = newValue.split(" ")
    first.value = parts[0]
    last.value = parts[1]
  }
})

Ayarlayıcıyı Kullanma

Yazılabilir bir hesaplanan özelliğe değer atadığınızda ayarlayıcısı çalışır.

fullName.value = "Grace Hopper"

// The setter splits and assigns:
// first.value -> "Grace"
// last.value  -> "Hopper"

Hesaplanan Özellik Ne Zaman Kullanılır?

Reaktif durumdan türetilmiş bir değere ihtiyaç duyduğunuzda computed kullanın.

Bir listeyi filtreleme veya sıralama
Verileri görüntüleme için biçimlendirme
Birden çok değeri tek bir değerde birleştirme

Bunun yerine yan etkilerle tepki vermeniz gerektiğinde izleyicileri (sonraki derste) kullanın.

Hızlı Kontrol

Hesaplanan özellikler hakkındaki anlayışınızı sınayın.

Özet: Hesaplanan Özellikler

Türetilmiş durumu öğrendiniz:

computed, reaktif verilerden değerler türetir
Önbelleğe alınır ve yalnızca bağımlılıklar değiştiğinde yeniden hesaplanır
Yöntemler her çağrıda çalışır; hesaplanan özellikler çalışmaz
Hesaplanan özelliklerde bir alıcı ve isteğe bağlı bir ayarlayıcı bulunabilir

Sırada: izleyiciler ve derin tepkisellik.

Sıkça Sorulan Sorular

“Hesaplanmış Özellikler” dersi ücretsiz mi?

Evet — “Hesaplanmış Özellikler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 3 dersten oluşur.

“Hesaplanmış Özellikler” dersinde ne öğreneceğim?

computed özellikleriyle önbelleğe alınmış reaktif değerler türetin. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 2. dersidir.

“Hesaplanmış Özellikler” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Vue Academy Sayfasına Dön