В каких случаях необходимо использовать computed свойства во vue 3 composition api?

Question

[loken99]

В каких случаях необходимо использовать computed свойства во vue 3 composition api? Чет я не понимаю, и можно ли вместо computed просто использовать переменную

Comments

[alexalexes]

Нужен пример свойства, где вы сомневаетесь в его использовании.

[WapSter]

Когда нужно следить за реактивными переменными и в зависимости от значения реагировать на изменения

[Кирилл Романов]

WapSter, когда нужно "реагировать" - это watch. А вот computed - это когда нам нужно состояние, которое напрямую зависит от других реактивных состояний.

[WapSter]

Кирилл Романов, придрался, молодец)

Answer 1

[blatisgense]

Computed свойства желательно использовать когда нужно отслеживать изменение переменной и затем производить вычисления или иные операции (зависящие от отслеживаемой переменной) результат которых будет сохранен в виде другой переменной.

Пример из официальной документации:

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

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

Отличие от watch в том что вычисляемые свойства кэшируются на основе их реактивных зависимостей. Это значит что код ниже не будет работать корректно, ведь всегда возвращает время первого вызова, а не актуальное.

const now = computed(() => Date.now())