Vue Academy · Урок

Вычисляемые свойства

Получайте кэшируемые реактивные значения с помощью вычисляемых свойств

«Вычисляемые свойства» — бесплатный урок Vue Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 3 уроков всего.

Что такое вычисляемое свойство

Вычисляемое свойство получает значение из других реактивных данных.

Оно пересчитывается только при изменении зависимостей
В шаблонах оно используется как обычное свойство
Оно сохраняет чистоту шаблонов, перенося логику в JS

Определение computed

В Composition API используйте функцию computed.

import { ref, computed } from "vue"

const firstName = ref("Ada")
const lastName = ref("Lovelace")

const fullName = computed(() => {
  return firstName.value + " " + lastName.value
})

Использование computed в шаблоне

К computed обращаются как к свойству данных, без круглых скобок.

<template>
  <p>{{ fullName }}</p>
</template>

<!-- fullName updates automatically when
     firstName or lastName change -->

Computed и методы

Метод тоже возвращает значение, так зачем использовать computed?

Computed кэшируется с учётом зависимостей
Метод выполняется при каждом вызове во время отображения

Computed эффективнее для производных значений, которые используются многократно.

Кэширование на практике

Computed запускается повторно только при изменении зависимости. Если обратиться к нему несколько раз, используется сохранённый результат.

const expensive = computed(() => {
  console.log("computing...")
  return heavyCalculation(data.value)
})

// Reading expensive twice in one render
// logs "computing..." only once

Методы выполняются при каждом вызове

В отличие от него, метод пересчитывает результат при каждом вызове, даже если входные данные не изменились.

// In template: {{ getTotal() }} {{ getTotal() }}
// Calls getTotal twice, recomputing both times

methods: {
  getTotal() {
    return this.price * this.qty
  }
}

computed в Options API

Options API объявляет вычисляемые свойства в блоке computed.

export default {
  data() {
    return { price: 10, qty: 3 }
  },
  computed: {
    total() {
      return this.price * this.qty
    }
  }
}

Геттеры computed

По умолчанию computed доступен только для чтения: он содержит только геттер.

Геттер выполняется, чтобы получить значение при изменении зависимостей.

const doubled = computed(() => count.value * 2)

// You can read doubled.value
// but assigning to it would warn

Сеттеры computed

Можно сделать computed доступным для записи, передав функции get и set.

const fullName = computed({
  get() {
    return first.value + " " + last.value
  },
  set(newValue) {
    const parts = newValue.split(" ")
    first.value = parts[0]
    last.value = parts[1]
  }
})

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

При присваивании значения вычисляемому свойству, доступному для записи, запускается его сеттер.

fullName.value = "Grace Hopper"

// The setter splits and assigns:
// first.value -> "Grace"
// last.value  -> "Hopper"

Когда использовать computed

Используйте computed, когда нужно получить значение, вычисленное на основе реактивного состояния.

Фильтрация или сортировка списка
Форматирование данных для отображения
Объединение нескольких значений в одно

Используйте наблюдатели (в следующем уроке), когда вместо этого нужно реагировать побочными эффектами.

Быстрая проверка

Проверьте, насколько хорошо Вы поняли вычисляемые свойства.

Итоги: вычисляемые свойства

Вы изучили производное состояние:

computed получает значения из реактивных данных
Результат кэшируется и пересчитывается только при изменении зависимостей
Методы выполняются при каждом вызове, а computed — нет
Computed может иметь геттер и необязательный сеттер

Далее: наблюдатели и глубокая реактивность.

Часто задаваемые вопросы

Урок «Вычисляемые свойства» бесплатный?

Да — полный текст урока «Вычисляемые свойства» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 3 уроков всего.

Чему я научусь в уроке «Вычисляемые свойства»?

Получайте кэшируемые реактивные значения с помощью вычисляемых свойств Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vue Academy?

Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.

Сколько времени занимает урок «Вычисляемые свойства»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vue Academy?

Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Vue Academy