冷门实用干货！Vue中数组数据的更新只有这几个，学费了吗~

数组即刻变更方法

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

注意事项

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。深入响应式原理中有相关的讨论。

如项目KTV点歌单，点击向上或向下时，vue不能检测更新并渲染识图！！

解决方法

Vue.set( target, propertyName/index, value )

参数：

{Object | Array} target
{string | number} propertyName/index
{any} value

用法：

向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = ‘hi’)

点歌单向上或向下demo

methods: {
down(i){
let temp = this.list[i]
this.$set(this.list,i,this.list[i+1])
this.$set(this.list,i+1,temp)},
up(i){
let temp = this.list[i]
this.$set(this.list,i,this.list[i-1])
this.$set(this.list,i-1,temp)} },

划重点！!
向下变更
1.this.$set(this.list,i,this.list(i+1))把i+1的值给到i等同于this.list=this.list(i+1)2.this.$set(this.list,i+1,temp)}, 把temp的值给到i+1
等同于 this.list[i+1] = temp