Հաշվարկվող հատկությունները 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 հատկությունը ավտոմատ կերպով ռեակտիվ կփոխվի, և մենք անմիջապես կտեսնենք փոփոխությունները էկրանին: