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()