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 개 이상의 타이머가 있기 때문에 후자가 될 것이라고 생각하기 때문에 성능이 필요합니다. 짧은

그래서 긴 이야기 : Momentjs and countdown timer

가 어떻게이의 Vue2 기능/방법/믹스 인을 만들 수 있습니까? 그리고 매초마다 업데이트됩니까?

감사 대신 각 타이머의 타임 - 루프를 갖는

Answer 1

, I는 모델에 대한 값을 갱신 한 간격을 갖는 제안 매초 및 산출 특성의 갱신을 트리거하기 위해 뷰의 반응성을 이용하여.

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) 
    }