Vue'da Hesaplanan Özellikler

Diğer özelliklere dayalı olarak reaktif bir şekilde hesaplanacak özellikler tanımlayabilirsiniz. Bu tür özelliklere hesaplanan özellikler denir. computed ayarında bulunurlar.

Bir örnekle inceleyelim. Özelliklerde kullanıcının adı ve soyadı saklansın:

javascriptdata() {
  return {
    name: 'john',
    surn: 'smit',
  }
}

full özelliğini yapalım, bu özellik tam adı ve soyadı içerecek:

javascriptcomputed: {
  full: function() {
    return this.name + ' ' + this.surn;
  }
}

Özelliklerimizin içeriğini template'te gösterelim:

App.vue<template>
  <p>{{ name }}</p>
  <p>{{ surn }}</p>
  <p>{{ full }}</p>
</template>

Hesaplanan özellikler reaktif olarak değişir. Bu şu anlama gelir: eğer adı veya soyadı değiştirirsek, full özelliğimiz de otomatik olarak reaktif bir şekilde değişecek ve değişiklikleri ekranda hemen göreceğiz.