【VUE】对data数据的深度监听（多层嵌套数据）

先举个栗子

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 视图层不更新值的变化
vm.items.length = 2 // 视图层不更新值的变化

由于 JavaScript 的限制，Vue视图层不能检测以上变动的数组

当你利用索引直接设置一个项时

例如：vm.items[indexOfItem] = newValue
解决办法：

// Vue.set
Vue.set(vm.items, indexOfItem, newValue);

或者

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

你也可以使用 vm.$set实例方法，该方法是全局方法 Vue.set 的一个别名:

vm.$set(vm.items, indexOfItem, newValue)

当你修改数组的长度时

例如：vm.items.length = newLength

// Array.prototype.splice
vm.items.splice(newLength)

注：splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

我在项目中是这样解决的

data() {
    return {
      form: {
        uid: null,
        roleName: '',
        summary: '',
        categoryMenuUids: [] // 
      }

form.categoryMenuUids值变化后，发现数据并没有更新。

handleEdit: function(row) {
  ...
  this.form.categoryMenuUids = newValue;
}

因为这个是属于form中的 categoryMenuUids 的变化，并不能使vue监听到变化，所以就不能改变。所以需要添加监听，deep = true

watch: {
  'form': {
    handler(newVal, oldVal) {
      console.log('value changed', newVal, oldVal);
    },
    deep: true
  }
}