问题如题。看了官方文档。

给出了这样的解释。

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

举个例子：

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

然后又看了一下vue的数据响应原理。

可知，直接给数组某元素赋值 和 通过length改变数组长度都是不能触发setter从而触发视图更新的。

然后官方给出了解决方案，如下：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

vm.items.splice(newLength)

PS：本文关键，重中之重

如果需要层级很深的某属性值，也要splice 第一层的data，而不能直接splice该层级，否则仍然失效。

data: function() {
    return {
      list: [
        { 
          id: 0, 
          name: [{
            a:1
          }] 
        }
      ]
    };
  }

vm.list[0].name.splice(index,1,newValue); //错

//正确方案如下
let list = vm.list[0];
list.name.splice(index,1,newValue);
vm.list.splice(indexF, 1, list);