Vue.js中如何使用watch监听families嵌套对象数据变化

你贴的代码中familiesToDisplay计算属性存在拼写错误，fillter应修正为filter，否则计算属性无法正常工作。

Vue的watch默认是浅监听模式，仅会监听被监听值的引用变更（比如直接给families重新赋值整个数组），数组内部项修改、嵌套对象属性变更不会触发回调。要捕获families下所有嵌套属性（包括person.name、work属性）的变更，需要开启深度监听配置。

全量深度监听实现 #

直接在组件的watch选项中添加如下配置即可：

data: () => ({
  families: [],
}),
computed: {
  familiesToDisplay() {
    return this.families.filter(family => family.members > 4);
  },
},
watch: {
  families: {
    // 开启深度递归监听，覆盖所有嵌套属性的变更
    deep: true,
    // 组件创建时是否立即执行一次回调，按需开启即可
    immediate: false,
    // 变更触发的回调函数
    handler(newValue, oldValue) {
      // 此处编写变更后的业务逻辑
      console.log('families 或其嵌套属性发生变更', newValue)
    }
  }
}

使用注意事项 #

• 深度监听会递归遍历被监听对象的所有嵌套层级，为每个属性绑定监听器，如果families数组体量极大、嵌套层级过深，会产生额外性能开销，大数据量场景谨慎使用
• 深度监听模式下，回调参数中的oldValue和newValue指向同一个对象/数组引用，二者值完全一致，无法直接通过oldValue获取变更前的快照，需要对比旧值的话要提前自行做深拷贝存储
• 如果不需要监听整个families的所有变更，只关心特定路径的属性，不需要开启全量deep，可以直接监听具体属性路径，性能更好：

watch: {
  // 示例：仅监听数组索引为0的家庭下person的name属性变更
  'families.0.person.name'(newName) {
    console.log('第一个家庭的人员姓名更新为：', newName)
  }
}

如果需要监听数组所有项的某一固定属性，可以在families数组初始化、新增项时，通过this.$watch动态为对应属性注册监听器，避免全量深度监听的性能损耗。

内容的提问来源于stack exchange，提问作者hayaa