Что такое вычисляемые свойства и как их использовать?

Вычисляемые свойства (computed properties) в Vue.js — это геттеры, которые кэшируют результат на основе своих зависимостей. Они полезны для вычисления значений, которые зависят от других реактивных данных, и их результат пересчитывается только при изменении этих зависимостей.

Использование:

1. Объявляются в опции computed компонента.
2. Представляют собой функции, возвращающие вычисляемое значение.
3. По умолчанию работают как геттеры (только для чтения). Для записи необходимо определить сеттер.

Пример геттера:

// Vue компонент
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    // Вычисляемое свойство, зависящее от firstName и lastName
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
};

Использование в шаблоне: {{ fullName }}

Пример геттера и сеттера:

// Vue компонент
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName: {
      // Геттер
      get() {
        return `${this.firstName} ${this.lastName}`;
      },
      // Сеттер
      set(newValue) {
        const names = newValue.split(' ');
        this.firstName = names[0];
        this.lastName = names[names.length - 1];
      }
    }
  }
};

Отличия от методов: