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())
