Vue.js 更新整个数组的最佳方式

Question

在vue.js中，更新整个观察数组并触发重新渲染的最佳方式是什么？而无需迭代和推送所有项目？我已经阅读了此处的文档：https://v2.vuejs.org/v2/guide/list.html#Replacing-an-Array，但是对我来说，使用过滤、连接或切片来更新数组没有意义。有些地方我可能遗漏了吗？

- Janspeed

---

“更新”是什么意思？是添加项目、替换项目还是删除项目？ - choasia

我是指用一个新数组替换所有项。 - Janspeed

那为什么不直接像这样替换它：oldArr = newArr？ - choasia

但是当你尝试它时会发生什么？（分配整个数组不是其中之一注意事项） - Roy J

这是一个有用的问题，可能会成为以后参考的依据。您可以撰写自己的答案来使其完整。 - Roy J

Answer 1

根据建议，我将自己回复这个问题，以帮助面临相同困境的任何人。

oldArr = newArr

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

另一个选项也可以是清空数组，然后推入新的数组，例如：

yourArray.push(... yourNewArray)

感谢reiner

- Janspeed

---

如果我将数组作为属性传递，它不会调用子组件的更新。 - ventro_art

Answer 2

我只是使用：

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

在这里阅读有关此的更多信息：Replacing-an-Array。

- Dan Levin

Answer 3

将初始数组长度设置为0，然后将它们合并在一起：

oldArr.length = 0
oldArr.concat(newArr)

- Maurici Abad

Answer 4

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

this.newArray = this.oldArray.concat()

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

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

- Dawid Stefaniak

Answer 5

我也遇到了这个问题，而且很多来自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

说明: https://v2.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://v2.vuejs.org/v2/guide/list.html#Replacing-an-Array

- Shanerk