Vue2中如何监听带有数字键的对象下的指定属性值

Vue2监听数字键对象属性的可行方案 #

• 方案1：直接使用方括号格式的字符串监听路径
  你之前认为'obj[1]'不支持作为watch监听路径属于误区，Vue2原生支持这种带方括号的路径写法，直接配置即可生效：

watch: {
  'obj[1]'(newVal) {
    // 这里就可以监听到obj[1]属性的变化
  }
}

如果需要监听数字键对应数组内部的元素变更，额外开启deep: true即可：

watch: {
  'obj[1]': {
    handler(newVal) {
      // 处理逻辑
    },
    deep: true
  }
}

• 方案2：使用函数式watch返回目标监听值
  如果键名是动态变量，或者担心字符串路径的兼容性，可以用函数返回要监听的目标值，效果完全一致：

watch: {
  () => this.obj[1],
  handler(newVal) {
    // 处理逻辑
  },
  deep: true // 按需开启
}

• 注意事项
  如果数字键属性是后续动态添加到obj对象上的，不要直接赋值this.obj[1] = []，要使用Vue提供的$set方法确保属性是响应式的，否则无法触发监听：

this.$set(this.obj, 1, [])

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