Vue momentjs는 상대 시간을 실시간으로 업데이트합니다.

Vue momentjs는 상대 시간을 실시간으로 업데이트합니다.

다음 날짜부터 상대 시간을 업데이트하려면momentjs사용자에게는 실시간입니까?

계산 결과:

computed: {
  ago() {
     return moment().fromNow();
    },
}

컴포넌트에서 사용하는 경우:

<span class="text-muted pr-2" v-text="ago"></span>

정적 텍스트가 표시됩니다.a few seconds ago페이지 새로고침 없이 이 텍스트를 업데이트하려면 어떻게 해야 합니까?보고 싶다:a minute ago,atwo minutes agoE.T.C.

사용자에게 실시간으로 이 작업을 수행할 수 있는 방법은 무엇입니까?

부터moment().fromNow()반응하지 않기 때문에 어떤 변화도 볼 수 없습니다.처리를 위해 우리는 오래된 시간 속성을 수정해야 합니다.이 속성은 초기화할 필요가 있습니다.created훅 및 1로 시간 간격을 설정합니다.이는 속성을 갱신하기 위해 호출하는 오래된 시간 속성에 따라 결정됩니다.

// ignore the following two lines, they just disable warnings in "Run code snippet"
Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',

  data() {
    return {
      ago: '',
      oldTime: '',
    interval:null
    }
  },
 destroyed(){
   clearInterval(this.interval)
   },
  created() {
    this.oldTime = new Date();
    this.interval=setInterval(() => {
      this.ago = moment(this.oldTime).fromNow();
    }, 1000)
  }
});

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>

<div id="app" class="container">

  <span class="text-muted pr-2" >
  {{ago}}
  </span>
</div>

@Badgy의 코멘트에 근거하고 있습니다.

How would you handle it for a v-for where you show it in the UI via a function? I thought about attaching it to the message object on created and update all message objects every x seconds but not sure if its the best way

이 상황에 맞추기 위해 우리는 시간 간격을 만들어야 합니다.ago각 메시지의 속성:

// ignore the following two lines, they just disable warnings in "Run code snippet"
Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#app',

  data() {
    return {

      messages: [{
          content: 'Hello !',
          time: '2019-09-10 00:08'
        },
        {
          content: 'Hello again!',
          time: '2019-09-10 00:10'
        }
      ],
  interval:null
    }
  },
  computed: {
    msgs() {
      return messages

    }
  },
       destroyed(){
   clearInterval(this.interval)
   },
  created() {

    this.interval=setInterval(() => {

      this.messages = this.messages.map(m => {
        m.ago = moment(m.time).fromNow();
        return m;
      })
    }, 1000)
  }
});

.primary{
color:blue
}

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>

<div id="app" class="container">

  <ul>
    <li v-for="m in messages">{{m.content}} <span class="primary">{{m.ago}}</span></li>
  </ul>
</div>

저는 Vuex 스토어에서 글로벌 "티커"를 사용하여 이 문제를 해결합니다.30초마다 부하가 증가하기 시작합니다.당시의 설명 메시지는 "now" 등의 다른 구현 대신 이 티커와 비교됩니다.모든 UI 요소가 자신의 날짜/시간 티커를 1초마다 반복하는 것과 같은 것에 비해 이 기술의 장점은 Vue에 정기적으로 모든 요소가 자동으로 새로 고쳐지지 않는다는 것입니다.내 어플리케이션에서는 하나의 글로벌 "의사적" 티커가 30초마다 반복되며, 당시의 설명 계정을 제공하는 모든 요소가 한 프레임에서 동시에 새로 고쳐집니다.이로 인해 퍼포먼스가 향상됩니다.

관련 Vuex 스토어의 단편:

import Vue from 'vue'

const TICKER_INTERVAL = 30000; // milliseconds

let tickerPointer = null;

const data = {
  state: {
    now: new Date,
  },

  mutations: {
    refreshTicker(state) {
      state.now = new Date;
    },
  },

  actions: {
    startTicker({commit}) {
      if (tickerPointer === null) {
        tickerPointer = setInterval(() => {
          commit('refreshTicker');
        }, TICKER_INTERVAL);
      }
    },

    haltTicker({state}) {
      clearInterval(tickerPointer);
      state.now = null;
      tickerPointer = null;
    },

"StartTicker"는 앱 로드 시 앱 상단에 한 번 발송됩니다.

언급URL : https://stackoverflow.com/questions/54280249/vue-momentjs-update-relative-time-in-real-time