Vue修改通过Props传递给子组件的数组后DOM未更新，求正确解决方案

问题根因 #

该问题是Vue2响应式系统的原生限制导致的，Vue2默认无法检测两类变更：

• 直接通过数组下标修改数组项，例如 this.arr[1] = newVal
• 动态给对象添加初始化时未声明的属性，或删除已有属性

你遇到的问题核心是 usersPages 下各元素的 data 属性要么初始化时未提前声明，要么之前对 usersPages 做过下标赋值操作，导致 data 数组本身不是响应式的，所以直接调用 push、修改用户属性时Vue无法检测到变更。

规范解决方案 #

1. 初始化阶段提前声明所有响应式属性 #

初始化usersPages时，提前给每个子项声明data属性，确保从一开始就是响应式的：

// 示例初始化逻辑，可根据你的业务调整
this.usersPages = new Array(this.userRolesNames.length).fill(null).map(() => {
  return {
    data: [], // 提前声明data属性，初始值可以是空数组
    // 其他需要用到的属性都提前列出来
  }
})

如果后续需要动态给usersPages新增子项，不要直接用下标赋值this.usersPages[xxx] = page，要用this.$set(this.usersPages, 下标, page)或者push方法添加。

2. 插入数据的正确写法 #

只要page.data是响应式数组，直接调用Vue包装过的数组变异方法即可，不需要手动调用Vue.set：

const newUser = response.data;
const page = this.usersPages[newUser.role - 1];
page.data.push(newUser);

3. 更新数据的正确写法 #

如果是修改已有用户的属性，直接赋值即可触发更新：

const updatedUser = response.data;
const page = this.usersPages[updatedUser.role - 1];
const target = page.data.find(item => item.id === updatedUser.id);
if (target) {
  // 所有user结构里已存在的属性直接赋值即可
  target.name = updatedUser.name;
  target.email = updatedUser.email;
  target.login = updatedUser.login;
  target.role = updatedUser.role;
}

如果需要直接替换整行用户数据，用splice方法即可：

const updatedUser = response.data;
const page = this.usersPages[updatedUser.role - 1];
const idx = page.data.findIndex(item => item.id === updatedUser.id);
if (idx > -1) {
  page.data.splice(idx, 1, updatedUser);
}

优化建议 #

父组件循环渲染UsersList时，不要用数组下标i作为key，如果role有唯一标识（比如roleId），替换为唯一值作为key，避免列表重排时出现渲染异常：

<UsersList
  v-for="role in userRolesNames"
  :key="role.id"
  :users="usersPages[role.id - 1].data"
/>

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