Ҳисобкунакӣ хосиятҳо дар Vue

Мумкин аст хосиятҳоеро муқаррар кард, ки ба таври реактивӣ дар асоси хосиятҳои дигар ҳисоб карда мешаванд. Чунин хосиятҳо ҳамчун ҳисобкунакӣ номида мешаванд. Онҳо дар танзимоти computed ҷойгир мешаванд.

Биёед ба мисол назар кунем. Бигзор дар хосиятҳо ном ва насаби корбар нигоҳ дошта шавад:

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

Биёед хосияти full-ро созем, ки номи пурра бо насабро дар бар гирад:

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

Дар намоиш мундариҷаи хосиятҳои худро баён кунем:

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

Хосиятҳои ҳисобкунакӣ ба таври реактивӣ тағйир меёбанд. Ин маънои онро дорад, ки агар мо ном ё насабро тағйир диҳем, ҳамон тавр хосияти мо full ба таври худкор реактивӣ тағйир ёфта ва мо фавран тағйиротро дар экран хоҳем дид.