Vue 改变数组触发视图更新

时间:2023-03-09 16:51:39
Vue 改变数组触发视图更新
最近给table做了一个点击排序的功能,数组更改以后发现data数据变了,但是视图不更新

写惯了js的我们随手一串代码

 this.items[2]={message:"Change Test",id:'1'}

这样数据虽然发生改变,但是视图不会更新。

注意事项:

由于 JavaScript 的限制,Vue 不能检测以下变动的数组:

1.当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue

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

VUE给出了方法:vue.set() ,或者写成 this.$set(ARR)

调用方法:Vue.set( target, key, value )

target:要更改的数据源(可以是对象或者数组)

key:要更改的具体数据

value :重新赋的值

现在的代码就可以写成

Vue.set( this.items, 2, {message:"Change Test",id:'1'} )

页面视图也会更新。

补充:

变异方法 (mutation method):

变异方法 (mutation method),顾名思义,会改变被这些方法调用的原始数组。相比之下,也有非变异 (non-mutating method) 方法,例如:filter(), concat() 和 slice() 。这些不会改变原始数组,但总是返回一个新数组

1.push()

2.pop()

3.shift()

4.unshift()

5.splice()

6.sort()

7.reverse()