vue更新数组时触发视图更新的⽅法
1）Vue.set 响应式新增与修改数据
可以设置对象或数组的值，通过key或数组索引，可以触发视图更新
target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据
value ：重新赋的值
①数组修改
Vue.set(array, indexOfItem, newValue)
this.array.$set(indexOfItem, newValue)
②对象修改
Vue.set(obj, keyOfItem, newValue)
this.obj.$set(keyOfItem, newValue)
2）Vue.delete
删除对象或数组中元素，通过key或数组索引，可以触发视图更新
①数组修改
Vue.delete(array, indexOfItem)
this.array.$delete(indexOfItem)
②对象修改
Vue.delete(obj, keyOfItem)
this.obj.$delete(keyOfItem)
3）数组对象直接修改属性，可以触发视图更新
this.array[0].show = true;
this.array.forEach(function(item){
item.show = true;
});
4）splice⽅法修改数组，可以触发视图更新
this.array.splice(indexOfItem, 1, newElement)
5）数组整体修改，可以触发视图更新
var tempArray = this.array;
tempArray[0].show = true;
this.array = tempArray
6）⽤Object.assign或lodash.assign可以为对象添加响应式属性，可以触发视图更新
//Object.assign的单层的覆盖前⾯的属性，不会递归的合并属性
this.obj = Object.assign({},this.obj,{a:1, b:2})
//assign与Object.assign⼀样
this.obj = _.assign({},this.obj,{a:1, b:2})
//merge会递归的合并属性
this.obj = _.merge({},this.obj,{a:1, b:2})
7） Vue包含⼀组观察数组变异的⽅法，使⽤它们改变数组也会触发视图更新不变异的⽅法:
push()  向数组的末尾添加⼀个或多个元素，并返回新的长度。
pop()  删除最后⼀个元素，把数组长度减 1，并且返回它删除的元素的值。
shift()  把数组的第⼀个元素从其中删除，并返回第⼀个元素的值。
unshift()  向数组的开头添加⼀个或更多元素，并返回新的长度。
splice()  向/从数组中添加/删除项⽬，然后返回被删除的项⽬。该⽅法会改变原始数组。
sort()  对数组的元素进⾏排序。
reverse()  颠倒数组中元素的顺序。
不变异的⽅法：
filter()
concat()
slice()
他们返回的是⼀个新数组，使⽤这些⽅法时，可以⽤新数组来替换原始数组
原理:
– Vue 在检测到数组变化时，并不是直接重新渲染整个列表，⽽是最⼤化复⽤DOM元素。替换的数组中，含有相同元素的项不会被重新渲染，
因此可以⼤胆的⽤新数组来替换旧数组，不⽤担⼼性能问题。
值得注意的是:
以下变动的数组中Vue是不能检测到的，也不会触发视图更新。
1.通过索引直接设置项， ⽐如this.books[3]={…}
2.修改数组长度， ⽐如 this.books.length = 1;
两个问题都可以⽤splice来解决：
lodash有哪些方法第⼀个问题 还可以⽤ set⽅法 this.$set(this.books,3,{…})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。