Vue.js为空数据对象新增属性后模板不渲染的解决方法

这是Vue 2.x响应式实现机制的固有局限：Vue 2初始化组件时，会递归遍历data选项里初始化阶段就存在的属性，通过Object.defineProperty为这些属性绑定getter/setter，建立数据变化到视图更新的追踪链路。
后续直接给响应式对象新增根级属性时，新增属性不会被自动绑定响应式逻辑，因此属性赋值后无法触发视图重渲染，就会出现点击后模板不显示新值的问题。

任选以下一种方式修改即可：

• 用Vue内置的$set方法新增响应式属性，修改changeMyObj方法：

methods: {
  changeMyObj() {
    // 三个参数分别为：目标对象、新增属性名、属性值
    this.$set(this.myObj, 'newKey', 'aaaa')
  }
}

• 直接替换整个对象的引用触发更新，适合一次新增多个属性的场景：

methods: {
  changeMyObj() {
    this.myObj = {
      ...this.myObj,
      newKey: 'aaaa'
      // 其他需要新增的属性可直接在此追加
    }
  }
}

补充：Vue 3.x 不存在这个限制。Vue 3基于Proxy实现响应式系统，可以原生检测对象属性的新增、删除操作，直接写this.myObj.newKey = 'aaaa'就能正常触发视图更新。

• Vuex强制要求所有状态修改必须通过mutation提交，框架内部对状态变更做了统一的响应式兼容处理，会自动保证修改后的状态能触发视图更新
• React的状态更新机制本身要求修改状态时返回全新的状态引用，不支持直接修改原对象属性后触发更新，从设计上就规避了这类问题

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