使计算的 Vue 属性依赖于当前时间？答案

【问题标题】：Make computed Vue properties dependent on current time?使计算的 Vue 属性依赖于当前时间？
【发布时间】：2019-03-21 01:09:23
【问题描述】：

我收藏了Events。这些将根据其状态呈现在列表中 - 即将到来的/实时的/以前的。因此，渲染取决于当前时间。我怎样才能使计算的属性随着时间的推移而更新/重新计算？

<template>
    <div>
        <h2>Upcoming events</h2>
        <p v-bind:key="event.name" v-for="event in upcomingEvents">{{ event.name }}</p>

        <h2>Live events</h2>
        <p v-bind:key="event.name" v-for="event in liveEvents">{{ event.name }}</p>

        <h2>Previous events</h2>
        <p v-bind:key="event.name" v-for="event in previousEvents">{{ event.name }}</p>
    </div>
</template>

<script>
    import Event from '../Event.js'

    export default {
        data() {
            return {
                events: []
            }
        },

        computed: {
            upcomingEvents() {
                return this.events.filter(event => event.isUpcoming())
            },

            liveEvents() {
                return this.events.filter(event => event.isLive())
            },

            previousEvents() {
                return this.events.filter(event => event.isPrevious())
            },
        },

        mounted() {
            // this.events are populated here 
        }
    }
</script>

【问题讨论】：

标签： vue.js time computed-properties

【解决方案1】：

您可以声明一个与时间相关的数据变量并使用setInterval() 对其进行更新：

data() {
    return {
        events: [],
        now: Date.now()
    }
},
created() {
    var self = this
    setInterval(function () {
         self.now = Date.now()
    }, 1000)
},
computed: {
    upcomingEvents() {
        return this.events.filter(event => event.isUpcoming(this.now))
    },
    liveEvents() {
        return this.events.filter(event => event.isLive(this.now))
    },
    previousEvents() {
        return this.events.filter(event => event.isPrevious(this.now))
    }
}

请注意，您需要在计算属性中使用now 以使其更新。

【讨论】：

谢谢，就像一个魅力！计算道具是一个很好的设计模式还是你会用另一种方式做得更好？
@Anders 您可能应该在 beforeDestroy 中清除Interval。 +1

【解决方案2】：

您的情况的一种可能性是$forceUpdate()。但是，应该注意它会专门针对您的情况，因为您不使用子组件。

如果您要使用子组件，则需要在父组件中使用 slots 并将子组件插入各自的插槽中。

因此，例如，您可以这样做：

created() {
    setInterval(() => {
        this.$forceUpdate()
    }, 5000)
}

这将导致整个组件重新渲染。这可能是也可能不是您正在寻找的理想互动。

【讨论】：

【解决方案3】：

您可以创建一个每秒更新一次的时间变量，然后在您的计算属性中使用此变量。

new Vue({
  el: "#app",
  data: {
    time: ''
  },
  computed: {
    computedValue: function(){
        return this.time;
    }
  },
  mounted: function(){
    var app = this;
    setInterval(function(){
      app.time = parseInt(new Date().getTime() / 1000);
        }, 1000);
  }
})

https://jsfiddle.net/ecwnvudz/

【讨论】：