Hesaplanan Özellik

Hesaplanan Özellik

Son adımda oluşturduğumuz todo listesine devam edelim. Burada her bir todo'ya bir geçiş işlevselliği ekledik. Bu, her todo nesnesine bir done özelliği ekleyerek ve bunu bir onay kutusuna bağlamak için v-model kullanarak gerçekleştirildi:

<li v-for="todo in todos">
  <input type="checkbox" v-model="todo.done">
  ...
</li>

bilgi

Bir sonraki iyileştirmemiz, tamamlanmış todos'ları gizleme yeteneği eklemektir. hideCompleted durumunu geçiş yapan bir düğmemiz mevcut. Ancak, bu duruma göre farklı liste öğelerini nasıl render ederiz?

Hesaplanan özellik tanıtıyoruz. Diğer özelliklerden reaktif olarak hesaplanan bir özelliği computed seçeneği kullanarak ilan edebiliriz:

export default {
  // ...
  computed: {
    filteredTodos() {
      // `this.hideCompleted` durumuna göre filtrelenmiş todos'ları döndür
    }
  }
}

createApp({
  // ...
  computed: {
    filteredTodos() {
      // `this.hideCompleted` durumuna göre filtrelenmiş todos'ları döndür
    }
  }
})

computed() tanıtıyoruz. Diğer reaktif veri kaynaklarına dayanan .value hesaplayan bir computed ref oluşturabiliriz:

import { ref, computed } from 'vue'

const hideCompleted = ref(false)
const todos = ref([
  /* ... */
])

const filteredTodos = computed(() => {
  // `todos.value` & `hideCompleted.value`'a dayalı filtrelenmiş todos'ları döndür
})

import { createApp, ref, computed } from 'vue'

createApp({
  setup() {
    const hideCompleted = ref(false)
    const todos = ref([
      /* ... */
    ])

    const filteredTodos = computed(() => {
      // `todos.value` & `hideCompleted.value`'a dayalı filtrelenmiş todos'ları döndür
    })

    return {
      // ...
    }
  }
})

- <li v-for="todo in todos">
+ <li v-for="todo in filteredTodos">

Hesaplanan bir özellik, hesaplama sırasında kullanılan diğer reaktif durumu bağımlılık olarak izler. Sonucu önbelleğe alır ve bağımlılıkları değiştiğinde otomatik olarak günceller.

ipucu

Şimdi, filteredTodos hesaplanan özelliğini eklemeyi ve hesaplama mantığını uygulamayı deneyin! Doğru bir şekilde uygulandığında, tamamlanmış öğeleri gizlerken bir todo'yu onaylamak, onu hemen gizlemelidir.