vue.js更新整个数组的最佳方法

Question

更新整个观察数组并在vue.js中触发重新渲染的最佳方法是什么，而不必迭代推送所有项目？

我在这里阅读了文档： https://vuejs.org/v2/guide/list.html#Replacing-an-Array

但是我不得不过滤，连接或切片只是为了更新数组？必须有我错过的东西吗？

Answer 1

正如所建议的那样，我会自己回应这个以帮助处于同样困境的人。

oldArr = newArr

应该仍然有用（谢谢choasia。尽管在vue.js文档中有些不清楚。替换整个数组不会属于那里提到的caveats（谢谢{{3 }}）。

一个选项也可能是清空数组，然后推送新的数组：

yourArray.push(... yourNewArray)

谢谢Roy J

Answer 2

我只是用

  

this.myArray = this.myArray.slice（）;

read about it here

Answer 3

我也遇到了这个问题，Vue 1.0中的大量示例代码提供了有关此主题的错误信息。所以我认为在Janspeed关于这个主题的正确答案后续发表我的发现可能会有所帮助。

例如，给定data:块中定义的数组如下：

  data: {
    event: { name: '', description: '', date: '' },
    events: []
  }

要设置整个数组（在这些示例中，设置为本地数组var localEvents），这些都可以正常工作，并且您可以使用第二种方法获得更多灵活性：

this.events = localEvents; // assigns array, is reactive
this.events = localEvents.slice(0, localEvents.length); // assigns array, is reactive

你会在教程中看到这样的样本，它不起作用：

this.set$("events", localEvents)

会导致此错误：

Cannot set reactive property on undefined, null, or primitive value: events

Per：https://vuejs.org/v2/guide/migration.html#Array-prototype-set-removed

但是，Vue.set可用于被动地将元素添加到数组中。因此，给定长度为3的数组：

Vue.set(this.events, 4, newEvent); // adds newEvent to array reactively
this.events.splice(4, 1, newEvent); // also adds newEvent to array reactively

当然，根据文档中的示例，如果指定与现有数组元素对应的索引值，则它将替换为输入对象（上例中的newEvent）。

请参阅：https://vuejs.org/v2/guide/list.html#Replacing-an-Array