В каком случае целесообразно использовать computed, если данные меняются с большим интервалом?
Я пишу небольшой веб-сайт на Vue 3, Vite.
У меня есть компонент Holidays, который выводит список праздников в конкретный (сегодняшний) день.
<script setup lang="ts">
import { computed } from 'vue'
import { getCurrentDay, getCurrentMonth, getHolidaysByDate } from '@/utils'
const today = new Date()
const currentDay = getCurrentDay(today)
const currentMonth = getCurrentMonth(today)
const currentHolidays = computed(() => getHolidaysByDate(currentDay, currentMonth))
</script>
<template>
<div class="holidays-list gc-font-body">
<template v-if="currentHolidays.length > 0">
<div
v-for="(holiday, index) in currentHolidays"
:key="index"
:class="['holiday', index === 0 ? 'holiday-important' : '']"
>
<div class="holiday-title">{{ holiday.title }}</div>
<div class="gc-font-gray">{{ holiday.description }}</div>
</div>
<div class="holiday holiday-additional gc-font-body-m gc-font-gray gc-align-center">
Посмотреть все
</div>
</template>
<div v-else class="gc-font-body gc-font-gray gc-align-center">
К сожалению, мы не нашли информацию о праздниках в этот день. Если у вас есть предложение
по добавлению праздника, пожалуйста, нажмите на кнопку «Добавить праздник» в шапке сайта.
</div>
</div>
</template>
ChatGPT предложил мне именно такое исполнение данной логики, где computed используется только у currentHolidays. Однако в различных источниках, и, периодически, тот же ChatGPT советует мне оборачивать today в ref — const today = ref(new Date()), а все последующие переменные — в computed.
По логике контент обновляется раз в день при перезагрузке страницы. Как мне известно, «computed желательно использовать когда нужно отслеживать изменение переменной и затем производить вычисления или иные операции (зависящие от отслеживаемой переменной), результат которых будет сохранен в виде другой переменной».
Хотел бы разобраться подробнее с этим.
Ответы (1 шт):
В данном случае computed вообще не нужно, поскольку переменные, полученные на текущем хите не меняются, а следовательно, и отслеживать нечего. Computed, возможно, понадобится, если today будет не константой. Например, пользователь захочет выбрать другую дату, чтобы узнать какие праздники приходятся на другой день.
Судя по всему, ChatGPT выбрал computed только для переменной currentHolidays, поскольку только она используется в шаблоне.