\n```\n\nВ Options API — блок `computed: { fullName() { ... } }`.\n\n## Computed vs method vs watch\n\n- **Method** в шаблоне вызывается при каждом рендере — без кэша.\n- **Computed** — кэш по зависимостям; идеален для производных данных в UI.\n- **Watch** — побочные эффекты (запросы, запись в storage), не для «вернуть значение в шаблон».\n\nНе мутируйте внешнее состояние внутри getter computed — это антипаттерн; для эффектов используйте `watch` / `watchEffect`.\n\n## Итог\n\nComputed — ленивое кэшируемое производное от реактивных данных. На mid-уровне ждут отличие от методов и понимание, когда нужен writable computed."}}}

Что такое computed-свойства?

Vue · middle · сложность 4

Войти, чтобы отмечать

В чём разница

Computed — кэшируемое производное значение: пересчитывается только когда меняются его реактивные зависимости. Это не «просто функция в шаблоне», а отдельный механизм с dependency tracking.

Пример

<script setup>
import { computed, ref } from 'vue'

const first = ref('Ada')
const last = ref('Lovelace')
const fullName = computed(() => `${first.value} ${last.value}`)

// редко нужен writable computed
const fullNameWritable = computed({
  get: () => `${first.value} ${last.value}`,
  set: (v) => {
    const [f, l] = v.split(' ')
    first.value = f
    last.value = l
  },
})
</script>

В Options API — блок computed: { fullName() { ... } }.

Computed vs method vs watch

Method в шаблоне вызывается при каждом рендере — без кэша.
Computed — кэш по зависимостям; идеален для производных данных в UI.
Watch — побочные эффекты (запросы, запись в storage), не для «вернуть значение в шаблон».

Не мутируйте внешнее состояние внутри getter computed — это антипаттерн; для эффектов используйте watch / watchEffect.

Итог

Computed — ленивое кэшируемое производное от реактивных данных. На mid-уровне ждут отличие от методов и понимание, когда нужен writable computed.

Загрузка…