最近在做一个AI智能客服项目，用Vue3重构了整个前端页面。传统客服页面在应对海量实时消息时，经常卡顿、延迟，用户体验很差。这次我深入实践了Vue3的新特性，结合一些性能优化手段，最终效果提升明显。这里把整个开发过程中的架构设计、核心实现和踩过的坑都梳理一下，希望能给有类似需求的同学一些参考。
一、 背景与痛点：为什么传统方案会卡？
在动手之前，我们先分析下传统客服页面（尤其是基于Vue2或早期React的）常见的几个问题：
- 实时性差：很多项目用HTTP轮询（Polling）或长轮询（Long Polling）来“模拟”实时，这会造成不必要的请求浪费、高延迟，服务器压力也大。
- 状态管理混乱：聊天状态复杂，包括消息列表、连接状态、用户输入、AI回复状态（思考中、流式输出、错误等）。用Options API或分散的Vuex模块管理，逻辑容易分散，复用困难。
- 长列表渲染性能瓶颈：当聊天记录积累到几百上千条时，一次性渲染所有DOM节点会导致页面严重卡顿、滚动不流畅，内存占用高。
- 交互体验不佳：用户快速输入时频繁触发搜索或发送请求，移动端输入法弹起可能遮挡输入框，缺乏消息发送状态的视觉反馈等。
二、 技术选型：为什么是Vue3？
当时也考虑过React，但综合项目团队技术栈和场景需求，最终选择了Vue3。简单对比一下：
- Vue3 Composition API vs React Hooks：两者都能很好地组织逻辑。Composition API的
setup()函数提供了更灵活的代码组织方式，可以将聊天相关的所有响应式数据、计算属性、方法封装在一个独立的useChat函数中，逻辑内聚，比Vue2的mixins清晰得多。对于需要深度响应式追踪的复杂聊天状态（如嵌套的消息对象），Vue3的reactive和ref用起来很直观。 - 构建工具链：Vite + Vue3 + TypeScript的开发体验非常快，热更新几乎是瞬间的，这对需要频繁调试实时通信和UI交互的项目来说效率提升巨大。
- 生态与团队：项目组对Vue更熟悉，且Vue3的生态（如状态管理Pinia、组件库）已非常成熟，能满足需求。
对于实时通信这个核心场景，无论Vue3还是React，底层都要依赖WebSocket。框架的选择更多是影响上层状态管理和组件组织的便利性。
三、 核心实现详解
1. 使用Composition API组织聊天状态逻辑
这是项目的基石。我创建了一个useChat.ts的组合式函数，将所有聊天相关的状态和逻辑收拢在一起。
// useChat.ts import { ref, reactive, computed, onUnmounted } from 'vue'; import type { Ref } from 'vue'; // 清晰的类型定义 export interface ChatMessage { id: string | number; content: string; timestamp: number; sender: 'user' | 'ai'; status?: 'sending' | 'success' | 'error'; // 发送状态 isStreaming?: boolean; // 是否为流式消息（AI正在输出） } export interface ChatState { messages: ChatMessage[]; connectionStatus: 'connecting' | 'connected' | 'disconnected' | 'error'; userInput: string; isLoading: boolean; } export function useChat(webSocketUrl: string) { // 使用reactive定义核心状态对象 const state: ChatState = reactive({ messages: [], connectionStatus: 'disconnected', userInput: '', isLoading: false, }); // 使用ref定义WebSocket实例，便于管理生命周期 const ws: Ref<WebSocket | null> = ref(null); // 计算属性：最后一条消息，用于滚动定位等 const lastMessage = computed(() => { const msgs = state.messages; return msgs.length > 0 ? msgs[msgs.length - 1] : null; }); // 连接WebSocket const connect = () => { state.connectionStatus = 'connecting'; try { ws.value = new WebSocket(webSocketUrl); setupWebSocketHandlers(ws.value); } catch (error) { state.connectionStatus = 'error'; console.error('WebSocket连接失败:', error); } }; // 设置WebSocket事件处理器（具体实现见下一节） const setupWebSocketHandlers = (socket: WebSocket) => { // ... 详细代码在下文 }; // 发送消息 const sendMessage = (content: string) => { if (!content.trim() || state.isLoading) return; const userMsg: ChatMessage = { id: Date.now(), content, timestamp: Date.now(), sender: 'user', status: 'sending', }; state.messages.push(userMsg); state.userInput = ''; state.isLoading = true; // 通过WebSocket发送 if (ws.value?.readyState === WebSocket.OPEN) { ws.value.send(JSON.stringify({ type: 'user_message', content })); userMsg.status = 'success'; // 假设发送成功 } else { userMsg.status = 'error'; state.isLoading = false; } }; // 组件卸载时清理 onUnmounted(() => { if (ws.value) { ws.value.close(); } }); // 暴露给模板使用的状态和方法 return { state, lastMessage, connect, sendMessage, // ... 其他方法 }; }这样，在组件中只需引入useChat，所有逻辑一目了然，也方便单元测试。
2. WebSocket实时消息推送与状态同步
WebSocket是实现实时对话的关键。在setupWebSocketHandlers中，我们需要处理连接、接收消息、错误和重连。
// 接上 useChat.ts 中的 setupWebSocketHandlers 函数 const setupWebSocketHandlers = (socket: WebSocket) => { socket.onopen = () => { state.connectionStatus = 'connected'; console.log('WebSocket连接成功'); // 可选：连接成功后拉取历史消息 // fetchHistoryMessages(); }; socket.onmessage = (event) => { try { const data = JSON.parse(event.data); handleIncomingMessage(data); } catch (e) { console.error('解析消息失败:', e); } }; socket.onerror = (error) => { console.error('WebSocket错误:', error); state.connectionStatus = 'error'; }; socket.onclose = (event) => { console.log(`WebSocket连接关闭，代码: ${event.code}, 原因: ${event.reason}`); state.connectionStatus = 'disconnected'; state.isLoading = false; // 触发自动重连机制 if (!event.wasClean) { scheduleReconnect(); } }; }; // 处理服务器推送的消息 const handleIncomingMessage = (data: any) => { switch (data.type) { case 'ai_response': // 处理AI回复，可能是完整消息也可能是流式片段 const aiMsg: ChatMessage = { id: data.id || `ai_${Date.now()}`, content: data.content, timestamp: data.timestamp || Date.now(), sender: 'ai', isStreaming: data.isStreaming, // 服务器可标记是否为流式输出中 }; if (data.isStreaming) { // 流式输出：查找或创建一条流式消息进行内容追加 const existingStreamingMsg = state.messages.find(msg => msg.id === data.id && msg.isStreaming); if (existingStreamingMsg) { existingStreamingMsg.content += data.content; } else { state.messages.push(aiMsg); } } else { // 非流式输出：直接添加新消息 state.messages.push(aiMsg); state.isLoading = false; // AI回复完成，结束加载状态 } break; case 'error': // 处理服务器返回的错误 console.error('服务器错误:', data.message); state.isLoading = false; // 可以添加一条错误提示消息到聊天框 break; // ... 处理其他类型的消息 } }; // 简单的重连机制（避坑指南会详细讲） let reconnectAttempts = 0; const MAX_RECONNECT_ATTEMPTS = 5; const RECONNECT_DELAY = 3000; const scheduleReconnect = () => { if (reconnectAttempts >= MAX_RECONNECT_ATTEMPTS) { console.error('已达到最大重连次数，放弃连接'); return; } reconnectAttempts++; setTimeout(() => { console.log(`尝试第 ${reconnectAttempts} 次重连...`); connect(); }, RECONNECT_DELAY * reconnectAttempts); // 退避策略 };3. 虚拟滚动优化长聊天记录渲染
当消息列表很长时，虚拟滚动是必须的。我选择了vue-virtual-scroller这个库，它和Vue3集成得很好。
首先安装：npm install vue-virtual-scroller
然后在主聊天列表组件中使用：
<!-- ChatMessageList.vue --> <template> <RecycleScroller class="chat-scroller" :items="messages" :item-size="80" <!-- 预估每条消息的高度 --> key-field="id" v-slot="{ item: message }" > <ChatMessageBubble :message="message" /> </RecycleScroller> </template> <script setup lang="ts"> import { RecycleScroller } from 'vue-virtual-scroller'; import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'; import ChatMessageBubble from './ChatMessageBubble.vue'; import type { ChatMessage } from './useChat'; defineProps<{ messages: ChatMessage[]; }>(); </script> <style scoped> .chat-scroller { height: 500px; /* 必须指定一个固定高度 */ overflow-y: auto; } </style>ChatMessageBubble组件负责渲染单条消息，根据message.sender决定左右布局。虚拟滚动的原理是只渲染可视区域内的DOM元素，极大减少了内存占用和渲染时间，即使有上万条消息，滚动依然流畅。
四、 性能优化实战
除了虚拟滚动，还有几个优化点对体验影响很大：
消息缓存策略：将已渲染的消息列表在内存中缓存一份，结合Vue的响应式，切换页面或重新连接时能快速恢复视图。对于历史消息，可以考虑使用
localStorage或IndexedDB进行持久化缓存，但要注意数据更新和清理策略。防抖处理用户输入：如果输入框有实时联想或搜索功能，必须加防抖。
import { ref, watch } from 'vue'; import { debounce } from 'lodash-es'; // 或自己实现 const userInput = ref(''); const debouncedSearch = debounce((query: string) => { // 执行搜索或联想请求 console.log('搜索:', query); }, 300); // 300毫秒延迟 watch(userInput, (newVal) => { debouncedSearch(newVal); });懒加载历史消息：不要一次性拉取所有历史记录。首次加载只拉取最近50条，当用户滚动到顶部时，再通过WebSocket或API分页加载更早的消息。这需要后端接口支持分页或按时间范围查询。
五、 避坑指南
WebSocket重连机制：上面的示例给出了一个简单的带退避策略的重连。生产环境需要更健壮，比如监听网络状态变化（
online/offline事件）触发重连，在页面获得焦点时（visibilitychange）检查连接状态等。移动端输入法兼容性问题：在移动端，输入法弹起可能会改变视口高度，导致固定定位的输入框被遮挡。解决方案通常是监听
window的resize事件，在输入法弹起时主动滚动页面，确保输入框在可视区域内。也可以使用CSSenv(safe-area-inset-bottom)来处理全面屏手机的底部安全区域。敏感词过滤实现：前端过滤是辅助，主要依赖后端。前端可以做简单的实时提示。可以将敏感词库构建成Trie树（前缀树）数据结构，在用户输入时进行高效匹配。
// 简单示例，实际词库可能很大 class SensitiveWordFilter { private trie: Record<string, any> = {}; constructor(words: string[]) { this.buildTrie(words); } private buildTrie(words: string[]) { for (const word of words) { let node = this.trie; for (const char of word) { if (!node[char]) node[char] = {}; node = node[char]; } node.isEnd = true; // 标记一个敏感词结束 } } containsSensitiveWord(text: string): boolean { for (let i = 0; i < text.length; i++) { let node = this.trie; let j = i; while (node[text[j]] && j < text.length) { node = node[text[j]]; j++; if (node.isEnd) { return true; // 找到敏感词 } } } return false; } } // 使用 const filter = new SensitiveWordFilter(['敏感词1', '敏感词2']); const hasSensitive = filter.containsSensitiveWord(userInput.value); if (hasSensitive) { // 给出提示，但发送前仍需后端最终校验 }
六、 总结与延伸
通过Vue3 Composition API组织逻辑、WebSocket保障实时性、虚拟滚动优化性能，再加上一系列细节优化，一个高性能的AI智能客服页面骨架就搭建起来了。
这个方案本身是响应式数据流清晰、易于维护的。在此基础上，可以进一步延伸：
- 多端适配：上述核心逻辑（
useChat）是纯JavaScript/TypeScript，不依赖DOM。可以很容易地封装成一个独立的SDK或Store。在H5端，直接用在Vue组件中；在小程序端（如uni-app或Taro），适配其网络API（替换WebSocket）和UI组件即可；甚至可以用Vue3的渲染器定制能力，尝试输出到Native。 - 功能扩展：加入消息已读未读状态、支持图片/文件上传、富文本消息渲染、快捷回复菜单、对话满意度评价等。
- 监控与调试：集成Sentry等监控工具，捕获前端错误；为WebSocket消息流添加详细的日志，便于调试复杂的对话状态。
开发过程中，深刻体会到良好的架构设计（状态分离、关注点分离）和性能优化前置思考的重要性。希望这篇笔记能帮你避开一些坑，更顺畅地构建自己的实时交互应用。
