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

Posted 2023-02-23

【中文标题】使计算的 Vue 属性依赖于当前时间？

【英文标题】：Make computed Vue properties dependent on current time?

【发布时间】：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>

【参考方案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/