Vue.js聊天组件选中后内容1秒消失问题排查求助

最可能的原因：<Link>组件的默认跳转行为 #

你在聊天选择项里使用的<Link>组件，如果是路由链接（比如Vue Router的<router-link>），点击时会默认触发页面路由跳转——哪怕是跳转到当前路由，也会导致组件重新挂载。此时onMounted中的initializeSelectedChat会重新执行，若props.chats未完成更新，或新的chats数组中没有之前选中的聊天，就会导致selectedChat被重置为null，内容随之消失。

解决方法：在点击事件中阻止默认跳转行为：

<Link @click.prevent="selectChat(chat)">
  {{ chat.name }}
</Link>

如果<Link>是自定义组件，检查其内部逻辑是否会触发路由跳转，确保点击时仅执行selectChat，不触发页面刷新或跳转。

其他排查方向 #

1. 检查fetchChatContent的实现 #

你未提供fetchChatContent的代码，需确认：

• 请求完成（包括成功/失败）后是否有意外修改selectedChat或messages的逻辑，比如错误处理中重置了selectedChat.value = null
• 是否存在异步竞态问题：快速切换聊天时，旧请求晚于新请求完成，导致messages被旧数据覆盖，进而影响selectedChat状态

2. 确认props.chats的响应式更新问题 #

• 聊天列表循环使用chats.data，但defineProps中定义chats为Array，说明父组件传递的是带data属性的对象。若父组件频繁重新获取聊天列表并更新chats，会导致子组件props.chats频繁变化，触发组件重渲染。
• 添加watch监听props.chats，避免初始化逻辑被意外触发：

watch(() => props.chats, (newChats) => {
  // 仅当selectedChat为空时自动选中第一个聊天
  if (!selectedChat.value && newChats?.length > 0) {
    selectedChat.value = newChats[0];
    fetchChatContent(selectedChat.value.id);
  }
}, { deep: true, immediate: true });

替换原onMounted中的initializeSelectedChat，避免每次chats更新都强制选中第一个聊天。

3. 排查组件重渲染问题 #

• 检查父组件是否给当前子组件设置了不稳定的key（比如随机数、每次渲染都会变化的值），导致组件频繁销毁重建
• 确认路由配置：若当前组件是路由视图的一部分，检查路由参数变化是否会导致组件重新挂载而非更新

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