vue 数组渲染问题

Posted 2020-10-11 梦幻飞雪

vue 数组渲染问题

问题一： 用v-for循环渲染数组数据时，数据更新了，视图却没有更新

　　由于 javascript 的限制， Vue 不能检测以下变动的数组：
　　　　1. 当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue
　　　　2. 当你修改数组的长度时，例如： vm.items.length = newLength

解决方法：

　　为了避免第一种情况，以下两种方式将达到像 vm.items[indexOfItem] = newValue 的效果， 同时也将触发状态更新：

// Vue.set
Vue.set(example1.items, indexOfItem, newValue) （数组， 所引， 值）

// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue) （所引， 长度， 值）

　　避免第二种情况，使用 splice：

example1.items.splice(newLength)