使用vue.js和moment.js创建倒计时

Question

我正在使用vue.js和moment.js创建一个计时器，我只用了几分钟和几秒钟，我的代码应该可以工作，但是我没有得到想要的结果：

var app = new Vue({
  el: '#app',
  data: {
    date: moment(60 * 10 * 1000)
  },
  computed: {
    time: function(){
      return this.date.format('mm:ss');
    }
  },
  mounted: function(){
    var aa = this.date;
    
    setInterval(function(){
      aa.subtract(1, 'seconds');
    }, 1000);
  }
});

<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">{{ time }}</div>

Answer 1

正如@Phil指出的，该问题是由反应性问题引起的。subtract只需更新一些属性，然后返回原始对象即可。

因此，我们必须使用一个新对象替换旧对象。（可能存在一种使用Vue.set或vm.$set更新矩对象的属性的方法，希望有人可以指出。）

像下面的演示：

var app = new Vue({
  el: '#app',
  data: {
    date: moment(60 * 10 * 1000)
  },
  computed: {
    time: function(){
      return this.date.format('mm:ss');
    }
  },
  mounted: function(){   
    setInterval(() => {
      this.date = moment(this.date.subtract(1, 'seconds'))
    }, 1000);
  }
});

<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app">{{ time }}</div>