多个 Vue.set() 不更新对象/DOM答案

【问题标题】：Multiple Vue.set() not updating object/DOM多个 Vue.set() 不更新对象/DOM
【发布时间】：2018-04-10 14:10:47
【问题描述】：

我正在学习 VueJs，并试图找出解决我问题的最佳方法。
问题是如果我多次调用this.$set()，只会注册最后一次调用。

我尝试过使用setTimeout（就像以前的 angular1 天一样），但它仍然不起作用。
然后我尝试了Vue.$nextTick()，它应该重新渲染 DOM，但似乎数据在对象中的添加速度不够快。

查看演示 here.
多次按下每个按钮，您会看到大部分时间都跳过了第一个日志。

【问题讨论】：

标签： javascript object vue.js vuejs2 settimeout

【解决方案1】：

Date.now() 的使用不正确。它发生得如此之快，以至于时间戳有时不会在 2 个 this.$set 操作之间发生变化，因此您覆盖了 logs 对象中的值。

点击第一个按钮时查看Date.now()的日志

 1509287060410 // first result of Date.now.
 1509287060412 // Second Result of Date.now - this time, it's different from the first attempt, so 2 different entries will be created.
 1509287061243 // another click on the button - timestamp has changed obviosuly.
 1509287061243 // Javascript did the second Set so far, that time timestamp didn't even changed yet. thus, it overrides the value of the second entry

所以这个日志，4 个this.$set 操作的结果，创建了这个logs 对象：

{
    1509287060410:"I was clicked!"
    1509287060412:"I was clicked again!"
    1509287061243:"I was clicked again!"
}

最后一个 1509287061243 属性被覆盖。

你必须确保每次调用this.$set（函数的第二个参数）的键都是不同的。

查看我的新代码建议：

  data() {
    return {
      title: 'Multiple Vue.set() not updating object/DOM',
      logs: {},
      index: 0
    }
  },
  methods: {
    log: function(data) {
      console.log(Date.now())
      this.index += 1
      this.$set(this.logs, this.index, data)
    },

【讨论】：

哇，我从来没有想过我可能会覆盖密钥！在一个框架内做这件事，真的会让你只考虑它并推开基础。我只是认为这与我在 Angular 世界中所面临的事情是一样的。谢谢！

【解决方案2】：

您还可以将日志类型更改为Array。这样您就不会因为键覆盖而错过任何日志。例如，

new Vue({
  el: '#app',
  data() {
    return {
      logs: []
    }
  },
  methods: {
    log(data) {
      this.logs.push({
        time: Date.now(),
        text: data
      })
    },
    logClick() {
      this.log('I was clicked!')
      this.log('I was clicked again!')
    }
  }
})

<div id="app">
  <button @click="logClick">Log click :)</button>
  <ul v-if="logs">
    <li v-for="(log, i) in logs" :key="i" v-text="log.text"></li>
  </ul>
</div>
<script src="https://unpkg.com/vue"></script>

【讨论】：

我知道这一点，但我想知道为什么它不适用于对象。