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 }, } 深度监听是能够响应数组里面的元素每一次的变化,但旧的值并没有被记录。原因在 官网文档 也有指明。 注意