vue 数组更新视图不更新

众所周知，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：不对之处，敬请指正！！！