axios请求响应后Vue未更新model，嵌套对象无法在视图展示问题问询

问题根因 #

该问题由Vue 2的响应式系统限制导致：

• Vue 2仅会对初始化时已在data中声明存在的属性做响应式劫持，原生的对象属性新增/删除操作无法被响应式系统自动检测
• 你初始化userData时为空对象，mounted阶段赋值后someNestedObject具备响应式特性，但执行delete this.userData.someNestedObject时直接移除了该属性，响应式系统丢失了对这个属性的监听
• 后续重新赋值this.userData = response.data时，如果后端返回的response.data和当前this.userData是同一引用（部分请求库会复用提交参数作为返回值引用），Vue无法检测到对象内部新增的someNestedObject属性，也就不会触发视图更新。

另外你代码中存在笔误：ApiSerivce拼写错误，正确应为ApiService，可优先排查该问题是否导致接口异常。

修复方案 #

按优先级从高到低有三种可选方案：

方案1：提交前拷贝对象，不直接修改响应式数据 #

不要直接修改和视图绑定的this.userData，提交前拷贝出一份新的对象处理参数，从根源避免破坏响应式属性：

async submit() {
  // 浅拷贝原对象处理提交参数，不影响原响应式对象
  const submitData = {...this.userData}
  delete submitData.someNestedObject;
  const response = await ApiService.updateUser(submitData);
  this.userData = response.data;
}

该方案侵入性最低，符合数据处理最佳实践，优先推荐。

方案2：使用Vue内置$delete方法删除属性 #

如果必须修改原userData对象，不要使用原生delete操作符，改用Vue 2提供的$delete方法，删除属性的同时同步通知响应式系统更新：

// 替换原delete语句
this.$delete(this.userData, 'someNestedObject')

方案3：强制触发组件渲染（兜底方案） #

如果前两种方案无法落地，可以在重新赋值userData后调用$forceUpdate强制组件刷新视图，该方案属于兜底操作，不建议常规使用：

this.userData = response.data;
this.$forceUpdate();

注：如果是Vue 3项目不存在该限制，Vue 3使用Proxy代理实现响应式，可自动检测对象属性的新增、删除操作。

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