VUE深度监听一个对象数组

 项目开发中需要监听Vue 组件data中的一个数组的变化：studentList

 使用 watch 直接监听数组 studentList的变化，没有效果，原因是：

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

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

解决：使用 deep 属性设置深度监听

 watch 的 API 里面，有一个属性：deep ，使用它就可以对数组等嵌套对象进行深度监听。

watch: {
  items: {
    handler (val, oldVal) {
      this.val = val
      this.oldVal = oldVal
      this.difference = _.differenceWith(val, oldVal, (i, k) => JSON.stringify(i) === JSON.stringify(k))
      this.lastUpdateTime = new Date().toISOString()
    },
    // 这里是关键，代表递归监听 items 的变化
    deep: true
  },
}

深度监听是能够响应数组里面的元素每一次的变化，但旧的值并没有被记录。原因在 官网文档 也有指明。

注意：在变异 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象 / 数组。Vue 不会保留变异之前值的副本。