Vue2：瞬間JSのカウントダウンタイマー

Question

私は解決する方法がわからない問題があります。

私には終了日のコンポーネントがあり、カウントダウンタイマーに残りの秒を表示したいとします。

私はこのために瞬間JSを使用しますが、これをVue2で実装する方法はわかりません。

計算方法を使用する必要がありますか？

 computed: { 
      timer: function() { 
       var now = moment(); 
       var then = moment().add(180, 'seconds'); 
       return moment().to(then); 
       (function timerLoop() { 
        this.timer = countdown(then).toString(); 
        requestAnimationFrame(timerLoop); 
       })(); 
      }, 

問題は、vue2が表示する前に値を返さなければならないという問題です。しかし、私は毎秒これを更新するためにrequestAnimationFrameも使わなければなりません。

誰でもお手伝いできますか？そして、これを使用する最良の方法は何ですか？ setIntervalまたはrequestAnimationFrame？ 1ページに100以上のタイマーが存在するため、後者は1つのパフォーマンスだと思う。

だから、長い話、短い： Momentjs and countdown timer

は、どのように私はこののVue2機能/方法/ミックスインを作成することができますか？そして、毎秒更新されますか？

Answer 1

代わりに各タイマの時間ループを持つことの

おかげで、私は、単一の間隔モデルに毎秒値を更新し、計算されたプロパティへの更新をトリガするためのVueの反応を使用してを持つお勧めします。

I've created a pen where you easily can play around with number active timers to see how it impacts performance.

data() { 
     return { 
      interval: null, 
      now: new Date(), 
      dates: [], // Your dates here 
     } 
    }, 
    computed() { 
     timers() { 
      return this.dates.map(then => moment(this.now).to(then)) 
     }, 
    }, 
    mounted() { 
     this.interval = setInterval(() => { 
      this.now = new Date() 
     }, 1000) 
    }