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

【问题标题】：vue.js best way to update entire arrayvue.js 更新整个数组的最佳方法
【发布时间】：2018-01-25 14:28:39
【问题描述】：

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

但是对我来说仅仅为了更新数组而必须过滤、连接或切片没有意义吗？一定是我错过了什么？

【问题讨论】：

标签： vue.js

【解决方案1】：

如果你想替换整个数组并创建一个新的反应数组，最简单的方法是使用一种受支持的数组操作方法，例如。 .concat():

this.newArray = this.oldArray.concat()

使用this.newArray = this.oldArray 会将反应性从一个数组克隆到另一个数组，因此对this.oldArray 的更改也将反映在this.newArray 上，这通常不是您想要实现的行为。

您还可以在 Vue 文档中查看其他支持的数组操作方法：https://vuejs.org/v2/guide/list.html#Mutation-Methods

【讨论】：

【解决方案2】：

我只是用

this.myArray = this.myArray.slice();

【讨论】：

【解决方案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

不过，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）。

【讨论】：

【解决方案4】：

按照建议，我会亲自回复这个问题，以帮助处于同样困境的任何人。

oldArr = newArr

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

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

yourArray.push(... yourNewArray)

【讨论】：