2019/10/19 VUE数组更新检测

#变异方法

作用  :  改变这些方法调用的原始数组

VUE包含一组观察数组的变异方法,他们也将触发视图的更新

数组方法:push()  pop()  shift()  unshift()  splace()  reverse()  sort()

用法:在控制台上输入 examplat1.items.push ( { message:'Diana丽丽' } )

#非变异方法 (替换数组)

作用 :  不改变原始数组, 返回新的数组

数组方法: filter()  concat()  slice()

使用新数组替换就数组

example1.items = example1. items.filter ( function(item){

return item.message.match ( / foo / );

} )

VUE并没有丢弃现有DOM重新渲染整个列表, 而是用一个含有相同元素的数组去替换原始数组,是一个很高效的操作

特别注意: 

由于js的限制,VUE不能检测一下变动的数组

1. 当你利用数组的索引直接设置一个项的值时: vm.items[indexofItem] = newValue

2. 当你修改数组的长度时: vm.items.length=newLength

解决方法:

1. Vue,set (example1.items, indexofItem, newValue)

example1.items.splice (indexofItem, 1, newValue)    //Array.prototype.splice(删除的index, 删除项, 替换值)

2. example1.items.splice (newLength)

#对象更改检测注意事项