Как заставить вычисляемое свойство пересчитываться по таймеру?

Компонент отображает время последнего обновления: «только что», «минуту назад», «5 минут назад», «вчера» и в таком духе. В него через props передаётся timestamp ts его обновления, а дальше он сам.

Отображаемое вычисляемое человекопонятное «5 минут назад» надо обновлять. Сразу после обновления раз в минуту. Потом раз в 15 минут, в час и потом.. да и потом можно раз в час, не жалко.

Не соображу, как правильно заставить обновляться это свойство. По умолчанию оно просчитывается раз при рендере компонента и дальше сидит спокойно, т.к. ts не меняется, причин для пересчёта нет.

Что пробовал. Добавил data-свойство now, которое ни в чём не участвует, т.к. по факту эти строки «5 минут назад» считаются в отдельном модуле на основе переданного туда ts и текущего времени, которое модуль и сам умеет узнать. При первом вызове вычисляемого свойства запускаю setTimeout(), который обновит data-свойство now. Но Vue ведь хитрооптимизирован! Если это свойство никак не используется в вычисляемом свойстве, то никакого обновления (вызова) не происходит.

Стоит добавить console.log(this.now) в тело вычисл. св-ва, как ура, всё исправно тикает. Но в production все console.* выпиливаются и обновления пропадут. Да и вообще это же костыль какой-то.

Так как мне задействовать никчемное data-свойство, или иначе вызывать обновление вычисляемого?

Сокращённый пример:
import ago from '@/utils/ago';

export default {
  props: {
    ts: Number,
  },

  data: () => ({
    now: Date.now(),
  }),

  computed: {
    lastUpdated: function() {
      console.log("[lastUpdated]", this.now); // так обновляется
      // console.log("[lastUpdated]"); // а так не обновляется

      const that = this;
      setTimeout(() => that.now = Date.now(), 5000);
      
      return ago(this.ts);
    }
  }
}
  • Вопрос задан
  • 405 просмотров
Пригласить эксперта
Ответы на вопрос 2
Vlad_IT
@Vlad_IT
Front-end разработчик
Вместо console.log(this.now) будет работать даже var temp = this.now, т.к. вычисляемое свойство, это "хитры" геттер. А почему не создать свойство строку в data - lastChanges, и по таймеру его менять? Пример https://jsfiddle.net/4zy10xoh/2/
Ответ написан
@levchak0910
answer.correct ? press({correct: true}) : next()
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы