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

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如果“现在”在日期之间，则返回一个，否则false

• dansTime以人性化的方式返回从现在到放学的时间

我的问题

我知道如何显示一次- 对括号之间的内容进行一次计算，但之后，从 Vue 的角度来看，没有什么需要重新计算 - 因为没有任何变化。

我可以运行（某事）的持续更新setInterval( XXX, 55000);，我想知道XXX应该怎么做。我最初想到enfant = enfant在那里强制执行，但这不会改变 的值，enfant因此不会触发重新计算。

强制重新计算并因此更新我的剩余时间的正确方法是什么？

Answer 1

只需存储now在组件数据中并创建计算属性，该属性将计算存储now和enfant.end更新now在setInterval...请参阅这个简单的时钟示例：new Vue({&nbsp; el: '#app',&nbsp; data: {&nbsp; &nbsp; now: new Date(),&nbsp; &nbsp; timer: null&nbsp; },&nbsp; computed: {&nbsp; &nbsp; time: function() {&nbsp; &nbsp; &nbsp; return this.now.toLocaleTimeString();&nbsp; &nbsp; }&nbsp; },&nbsp; mounted: function() {&nbsp; &nbsp; let self = this;&nbsp; &nbsp; this.timer = setInterval(function() {&nbsp; &nbsp; &nbsp; self.now = new Date()&nbsp; &nbsp; }, 1000)&nbsp; },&nbsp; beforeDestroy: function() {&nbsp; &nbsp; clearInterval(this.timer)&nbsp; }})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="app">&nbsp; <div>{{ time }}</div></div>