Общие сведения о вычисляемых свойствах

Завершено

С помощью синтаксиса handlebars ({{ }}) можно отображать значения и внедрять JavaScript в HTML. Это эффективный синтаксис, но он может привести к запутанному или повторяющемуся коду. Вычисляемые свойства в Vue можно использовать для разгрузки вычислений и других форм динамических строк.

Создание вычисляемого свойства

Аналогично тому, как методы добавляются в поле methods, в поле computed добавляются вычисляемые свойства. Вычисляемое свойство — это функция, которая возвращает значение. Как и метод, вычисляемое свойство может получить доступ к активному экземпляру Vue с помощью this.

Вычисляемые свойства можно использовать для объединения firstName и lastName в свойство fullName, выполнения уточняющих запросов в массиве для возврата правильного значения или выполнения других динамических задач.

Кроме того, вычисляемое свойство является реактивным. Если какие-либо значения в вычисляемом свойстве изменяются, вычисляемое свойство обновляется, чтобы отобразить изменения.

В следующем примере создается fullName.

const app = Vue.createApp({
    data() {
        return {
            firstName: 'Cheryl',
            lastName: 'Smith'
        }
    },
    computed: {
        fullName() {
            return `${this.lastName}, ${this.firstName}`
        }
    },
});

Строковый литерал объединяет поля lastName и firstName.