vue更新数组时触发视图更新的方法

1、更新整个数组

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

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

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

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

答案 0 :(得分：10)

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

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

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

yourArray.push(... yourNewArray)
谢谢Roy J
答案 1 :(得分：1)

我只是用

  
this.myArray = this.myArray.slice（）;
read about it here
答案 2 :(得分：0)

我也遇到了这个问题，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

2、更新数组元素

vue更新数组时触发视图更新的方法

变异方法：

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()
替换数组：

例如：filter(), concat()和 slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用这些非变异方法时，可以用新数组替换旧数组：

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})
你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的、启发式的方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

注意事项：

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
举个例子：

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
为了解决第一类问题，以下两种方式都可以实现和vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
你也可以使用vm.$set实例方法，该方法是全局方法 Vue.set 的一个别名：

vm.$set(vm.items, indexOfItem, newValue)
为了解决第二类问题，你可以使用 splice：

vm.items.splice(newLength)
以代码为镜，可通逻辑；以人为镜，可明得失。