Vue 2嵌套data对象新增属性无响应？求底层原因

核心原理 #

Vue 2的响应式系统依赖Object.defineProperty API实现，这个API有个关键局限性：只能在对象初始化阶段，对已存在的属性做"响应式劫持"——也就是给属性添加getter和setter，以此追踪属性的读取、修改操作。对于初始化完成后新增的属性，Vue无法自动为其绑定响应式的getter/setter，所以修改这类属性时，Vue感知不到变化，自然不会触发视图更新。

对应你的代码分析 #

你的data里初始化了addedRows.section1为一个空对象：

data() {
  return {
    addedRows: {
      'section1': {}
    }
  }
}

调用addToList方法时，你直接给section1新增了chapter1属性：

this.addedRows.section1[chapter] = this.addedRows.section1[chapter] || []

这个chapter1属于初始化后新增的属性，Vue没给它加响应式的getter/setter。后续你对chapter1对应的数组执行push操作时，虽然JavaScript对象本身的数据确实被修改了（所以控制台能打印出更新后的结果），但Vue检测不到这个变化，因此视图不会同步更新。

补充：符合响应式规则的修复思路（供参考） #

如果要让新增属性具备响应式，可使用Vue提供的this.$set方法手动为属性添加响应式劫持：

addToList(chapter) {
  // 用$set新增属性，确保响应式
  if (!this.addedRows.section1[chapter]) {
    this.$set(this.addedRows.section1, chapter, [])
  }
  this.addedRows.section1[chapter].push({'T': 'XXX'})
}

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