Vue 修改data中的数组和对象，DOM却不刷新

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

给出了这样的解释。

由于 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);
 

 

 

 

==============================
QQ群：143522604
群里有相关资源
欢迎和大家一起学习、交流、提升！
==============================