众所周知，Vue.js3.0之前是使用了Object.defineProperty来实现双向数据绑定。当数据变化时，会反应到视图上。但是是有缺陷的，比如以下情况：
this.arr[1] = 11
this.arr.length = 2
对数组的这两种操作可以改变this.arr，但是视图不会更新。
去搜索，文章总是一句话概况：由于js的限制，Vue无法检测数组某些变动。
晕死，还是自己动手吧！！！
Object.defineProperty
回到原生js，我们试着用Object.defineProperty来改写数据：
var data = {}
Object.defineProperty(data, 'test', {
set (value) {
this.testValue = value
console.log('更新')
},
get () {
return this.testValue
}
})
data.test = [1, 2, 3] // 打印‘更新’
console.log(data.test) // [1, 2, 3]
data.test[3] = 4 // 没打印 ‘更新’
console.log(data.test) // [1, 2, 3, 4]
使用array[index]赋值的方式无法触发setter，自然无法触发视图更新（Vue中，数据变动，setter调用notify去更新视图）。
Proxy
换一种方式，使用Vue3.0所使用的Proxy代理试试：
var obj = {
test: '',
}
let objProxy = new Proxy(obj, {
get: (target, prop) => {
return prop in target ? target[prop] : '空'
},
set: (target, prop, value) => {
target[prop] = value
console.log('更新')
}
})
objProxy.test = [1, [2, 3], 4] // 打印‘更新’
console.log(obj.test) // [1, [2, 3], 4]
objProxy.test[1][1] = 5 // 没打印 ‘更新’
console.log(obj.test) // [1, [2, 5], 4]
结果显示，同样无法打印更新，也就无法触发视图更新。
好吧，这就是js的限制。
解决
变异方法（Vue中做了变动，可以触发视图更新）：
push()、pop()、shift()、unshift()、splice()、sort()
对于修改数组的某个元素的值，可以利用Vue提供的方法：
this.$set(data of array, index of array, newValue)
// 例如：
this.$set(this.arr, 1, 4)
还可以使用变异方法中的splice来替换：
data of array.splice(要插入的位置, 要删除的项数, 要插入的值)
// 例如：
this.arr.splice(1, 1, 4)
this.array.length = x 也可以使用splice来操作：
this.arr.splice(2)
这样，arr就只剩前面两项。
ps：不对之处，敬请指正！！！
