vue.js 2 中的重新渲染列表答案

【问题标题】：Rerender list in vue.js 2vue.js 2 中的重新渲染列表
【发布时间】：2017-02-10 12:20:11
【问题描述】：

我使用moment.js 来显示某个事件已经过去了多少时间。

我有一个列表（使用vue.js 呈现）

event 3, 5 seconds ago
event 2, 1 minute ago
event 1, 5 minutes ago

问题是：列表不经常更新（添加新项目，例如每 2 分钟一次）。

我想更新n (seconds|minutes) ago 字符串。

我应该使用 setInterval 做简单的循环吗？

for(let i = 0; i < this.list.length; i++) {
    let item = this.list[i];
    item.created_at_diff = moment(item.created_at).fromNow();
    this.$set(this.list, i, item);
}

还是有更好的方法？

【问题讨论】：

字符串不应该是使用列表的计算属性吗？如果是这种情况，当您更改列表时，字符串也应该更改。
@Potray，如何为列表item而不是整个列表编写计算属性？
以下是计算属性的编写方式：vuejs.org/v2/guide/computed.html#ad

标签： vue.js momentjs

【解决方案1】：

我会这样做，如果我错了，请告诉我：

首先，我将创建一个组件来制作计时器：

let Timer = Vue.extend({
  template: '#timer',
  props: ['timestamp'],
  data () {
    return {
        formatted: ''
    }
  },
  methods: {
    format () {
      let self = this
      this.formatted = moment().to(moment(this.timestamp,'X'))

      // Uncomment this line to see that reactivity works
      // this.formatted = moment().format('X')

      setTimeout(() => {
        self.format()
      },500)
    }
  },
  created () {
    this.format()
  }
})

计时器具有一个属性，即 UNIX 时间戳（以秒为单位）。该组件包含一个名为format() 的方法，它将更新组件的唯一数据formatted。该方法是递归的，每 500 毫秒调用一次自身（使用setTimeout()），如果需要，您可以将这个数字设置得更大。

如果你想测试它，这是我制作的一个 jsFiddle：

https://jsfiddle.net/54qhk08h/

【讨论】：