如何强制重新计算不变的参数？

Question

我的问题的背景我每天通过 MQTT 收到一次（例如，在 01:15），当天的两个时间戳：事件的开始和结束（这是一个家庭仪表板，令人兴奋的现实是这些是我的孩子们那天在学校）。我今天在仪表盘上显示的是9:00 → 17:10。当收到和更改新的 MQTT 消息时，此信息会start更新end。这很好用。我现在想添加一个额外的信息，显示如下9:00 → 17:10 (in 27 minutes)这in 27 minutes部分是从现在到放学日（17:10上图）结束之间的时间。我知道如何计算和显示它（包括只有当“现在”在开始和结束之间时它才可见的事实）。这是通过诸如{{ extractTime(enfant.start) }} → {{ extractTime(enfant.end) }} <span v-if="dansCreneau(enfant.start, enfant.end)">({{dansTime(enfant.end)}})</span>extractTime采用 ISO 日期并输出 24 小时时间dansCreneautrue如果“现在”在日期之间，则返回一个，否则falsedansTime以人性化的方式返回从现在到放学的时间我的问题我知道如何显示一次- 对括号之间的内容进行一次计算，但之后，从 Vue 的角度来看，没有什么需要重新计算 - 因为没有任何变化。我可以运行（某事）的持续更新setInterval( XXX, 55000);，我想知道XXX应该怎么做。我最初想到enfant = enfant在那里强制执行，但这不会改变 的值，enfant因此不会触发重新计算。强制重新计算并因此更新我的剩余时间的正确方法是什么？

Answer 1

只需存储now在组件数据中并创建计算属性，该属性将计算存储now和enfant.end

更新now在setInterval...

请参阅这个简单的时钟示例：

new Vue({

  el: '#app',

  data: {

    now: new Date(),

    timer: null

  },

  computed: {

    time: function() {

      return this.now.toLocaleTimeString();

    }

  },

  mounted: function() {

    let self = this;

    this.timer = setInterval(function() {

      self.now = new Date()

    }, 1000)

  },

  beforeDestroy: function() {

    clearInterval(this.timer)

  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <div>{{ time }}</div>

</div>