VUE深度监听一个对象数组

最新推荐文章于 2025-09-25 18:52:11 发布

原创最新推荐文章于 2025-09-25 18:52:11 发布 · 1.7w 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

前端相关专栏收录该内容

11 篇文章

订阅专栏

本文介绍在Vue项目中，如何有效监听数组studentList的变化。直接使用watch监听数组变化无效，因JavaScript限制，Vue无法检测直接设置数组项或修改长度的操作。通过设置watch的deep属性为true，实现对数组的深度监听，响应数组内元素变化。

项目开发中需要监听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 不会保留变异之前值的副本。