Вычисляемые свойства в 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 автоматически реактивно изменится и мы сразу увидим изменения на экране.