1、首先,Vue 在检测到数组变化时,并不是直接重新渲染整个列表,而是最大化复用DOM元素。替换的数组中,含有相同元素的项不会被重新渲染,因此可以大胆的用新数组来替换旧数组,不用担心性能问题。
2、两个问题都可以用splice来解决:第一个问题 还可以用 set方法 this.$set(this.books,3,{...})由于 JavaScript 的限制,Vue 不能检测以下变动的数组:当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
3、当你修改数组的长度时,例如:vm.items.length = newLengthvar vm = new Vue({dat锾攒揉敫a: {items: ['a', 'b', 'c']}})vm.items[1] = 'x' // 不是响应性的vm.items.length = 2 // 不是响应性的
4、为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将触发状态更新:// Vue.setVue.set(vm.items, indexOfItem, newValue)
5、// Array.prototype.splicevm.items.splice(indexOf诔罨租磊Item, 1, newValue)你也可以使用 v罪焐芡拂m.$set 实例方法,该方法是全局方法 Vue.set 的一个别名:vm.$set(vm.items, indexOfItem, newValue)