vue -- 数组变化检测

vue有时候在改变了数组的值的时候，视图并不会更新，这时候就需要调用vue变化数组的方法来实现

一、变化数组方法

push() pop() shift() unshift() splice() sort() reverse()

二、替换一个数组

filter() concat() slice()

为什么vue数组改变了，视图不变？Tips 由于 JavaScript 的限制，Vue 无法检测到以下数组变动 1、当你使用索引直接设置一项时，例如 vm.items[indexOfItem] = newValue 2、当你修改数组长度时，例如 vm.items.length = newLength

data: { arr: [ {name: '李狗蛋'}, {name: '李翠花'} ] } app.arr[0] = {name: '王二丫'}

展示结果：js 现在我们再来改变一下：js Vue.set(app.arr,0,{name: '王二丫'})

展示结果: 李狗蛋 李翠花

发现虽然修改了arr第一项的内容，但是视图并没有像我们所预想的那样跟着改变

如何解决单独改变数组某项值而视图不刷新问题？

1、Vue.set()

Vue.set(目标数组,改变项的索引,新值)

王二丫 李翠花

或者利用数组方法splice的替换功能

app.arr.splice(0,1,{name: '丫蛋'})

展示结果：

丫蛋 李翠花

如何解决设置数组长度而视图不刷新问题？

2、splice()

app.arr.splice(1)

展示结果 :

李狗蛋

splice()会删除指定索引及以后的数组项，返回的是为指定索引之前的数组项组成的新数组

转载于:https://www.cnblogs.com/zjh-study/p/10655676.html