Vue.js使用扩展运算符拼接通知数组时页面空白问题排查

可能的问题原因 #

1. v-for的key使用不合理：你用'notification_' + index作为key，当数组新增元素时，Vue的虚拟DOM复用逻辑会出现判断偏差，导致视图无法正确更新甚至空白。
2. 异步请求无错误捕获：两个请求的try块后未配置catch，如果第二个请求失败，会中断流程但无法看到报错信息。
3. 返回数据结构异常：第二个请求返回的data可能为空、或结构不符合预期，导致拼接后的数组无法被模板正确渲染，但未抛出显性错误。

解决方案 #

1. 修正v-for的key值 #

放弃用index作为key，改用每个通知的唯一标识（比如后端返回的id字段），让Vue能精准识别元素变化：

<div
  class="notification-item"
  v-for="notification in notifications"
  :key="notification.id"
>

2. 给异步请求添加错误捕获 #

在两个请求的try后加上catch，排查是否存在请求失败的情况：

async handleLoadFriendshipRequests() {
  try {
    const { data } = await api.get(`/${this.endpoint}/friendships/requests`);
    const newNotifications = data.map(item => ({
      ...item,
      type: "friendship"
    }));
    this.notifications = [...this.notifications, ...newNotifications];
  } catch (err) {
    console.error("加载好友请求失败:", err);
    // 可添加前端错误提示，比如this.$message.error('加载好友请求失败')
  }
}

3. 验证数组拼接后的结构 #

在赋值前后打印数组，确认数据格式符合模板要求：

console.log("原有通知:", this.notifications);
console.log("新增好友请求:", newNotifications);
this.notifications = [...this.notifications, ...newNotifications];
console.log("拼接后通知数组:", this.notifications);

重点检查每个元素是否包含type字段，且值为group或friendship，确保模板中的v-if能正确匹配。

4. 备选数组更新方式 #

如果扩展运算符赋值仍有问题，可尝试Vue官方推荐的数组更新方法：

// 方式1：逐个push元素
newNotifications.forEach(item => this.notifications.push(item));

// 方式2：用concat生成新数组再赋值
this.notifications = this.notifications.concat(newNotifications);

额外排查点 #

• 检查模板中v-if="notification.type === 'group'"后续的代码是否存在语法错误（比如标签未闭合、引用未定义的变量），这类问题可能导致渲染失败但无显性报错。
• 确认this.endpoint的值正确，两个请求的URL无误，避免请求返回空数据。

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