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