Vue3 全栈原型上线：功能边界要怎么收

Vue3 对话 Demo 可以直接把 SSE 数据写入响应式变量，但生产实现还要处理请求取消、数据乱序、长文本渲染与资源释放。

这些边界场景决定了原型能否成为可维护的功能。

1. Demo 与生产的距离：前端处理 AI 流式打字机的三道坑

在全栈 AI 应用的前端研发中，看似简单的打字机效果背后隐藏着三个工程隐患：

1. 竞态条件与流覆盖（Race Condition）：用户在上一条回复还没打印完时点击了“重新生成”或发送了新问题。如果旧的 HTTP 连接没有被终止，新旧两条 SSE 数据流会交叉写入响应状态，导致前端回复内容错乱混杂。
2. 频发重绘带来的 UI 卡顿：后端如果以 10ms 每次的粒度推送文本 chunk，Vue3 的响应式系统就会频繁触发依赖收集与模板重新渲染。结合 Markdown 解析库（如 marked），会导致 CPU 利用率瞬间飙到 100%，页面滚动直接掉帧到个位数。
3. 内存泄漏与后台无脑消耗：当用户离开当前组件路由或关闭弹窗时，如果未及时关闭底层 EventSource 或 ReadableStream，底层网络连接会持续占用内存，直到后端自然超时断开。

2. Vue3 组合式 API + AbortController：随时中断与流式状态防打扰

解决这些问题的核心方案在于：利用AbortController实现前端请求的强制中途截断，同时结合防抖节流策略，将微小的流式 token 攒成批次（Batching）更新至 UI。

sequenceDiagram autonumber participant UI as Vue3 页面组件 participant Hook as useAIStream Hook participant Controller as AbortController participant Server as 后端 SSE 接口 UI->>Hook: 发送新消息 sendPrompt("解释 Vue3 响应式") Hook->>Controller: 检查是否存在旧 controller Note over Hook,Controller: 若存在旧请求，立刻调用 abort() 截断 Hook->>Server: 发起 fetch (带 signal 信号) Server-->>Hook: 持续返回 SSE Chunk 文本 Hook->>Hook: 写入缓冲区 (Chunk Buffer) Hook->>UI: 触发 rAF 节流批量刷新 UI UI->>Hook: 用户点击“停止生成”或切换路由 Hook->>Controller: 执行 controller.abort() Controller-->>Server: 终止 HTTP 连接 Hook->>UI: 变更状态为 StreamState.CANCELLED

如上图所示，前端通过 Hook 统一管理 HTTP 链接的声明周期，通过缓冲池配合requestAnimationFrame（rAF）实现高性能打字机渲染。

3. 虚拟渲染与 Markdown 流式渲染防抖优化

为了解决长文本导致的 UI 卡顿，生产环境中不能在每一次收到字符时都重新调用 Markdown 解析器。

推荐策略：

• 缓冲区（Buffer Queue）：将收到的流文本存入内存变量缓冲队列。
• 渲染节流（RAF Throttle）：使用requestAnimationFrame保证每秒最多更新 60 次（或 30 次）Vue3 响应式变量，避免微任务高频触发 DOM 重排。
• 增量 Markdown 节点渲染：只有当句子包含换行符（\n）或标点断句时，才对完整的段落进行 Markdown 深度解析，非完结段落使用纯文本节点渲染。

4. Vue3 生产级流式对话组件与状态管理代码

下面是一段基于 Vue3 + TypeScript 实现的生产级流式 Hook 代码，完全包含请求取消、缓冲节流与组件销毁自动清理机制。

import { ref, onUnmounted, Ref } from 'vue' export enum StreamStatus { IDLE = 'idle', LOADING = 'loading', STREAMING = 'streaming', COMPLETED = 'completed', ERROR = 'error', CANCELLED = 'cancelled' } export interface UseAIStreamOptions { apiUrl: string onFinish?: (fullText: string) => void onError?: (err: Error) => void } export function useAIStream(options: UseAIStreamOptions) { const textContent = ref<string>('') const status = ref<StreamStatus>(StreamStatus.IDLE) const errorMessage = ref<string>('') let abortController: AbortController | null = null let bufferText = '' let animationFrameId: number | null = null // 使用 rAF 批次刷新 UI，防止频繁重绘卡顿 const flushBuffer = () => { if (bufferText !== textContent.value) { textContent.value = bufferText } if (status.value === StreamStatus.STREAMING) { animationFrameId = requestAnimationFrame(flushBuffer) } } const stopStream = () => { if (abortController) { abortController.abort() abortController = null } if (animationFrameId !== null) { cancelAnimationFrame(animationFrameId) animationFrameId = null } if (status.value === StreamStatus.STREAMING) { status.value = StreamStatus.CANCELLED } } const sendPrompt = async (prompt: string) => { // 1. 如果有未结束的旧流，中断它 stopStream() // 2. 重置状态 textContent.value = '' bufferText = '' errorMessage.value = '' status.value = StreamStatus.LOADING abortController = new AbortController() try { const response = await fetch(options.apiUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt }), signal: abortController.signal }) if (!response.ok || !response.body) { throw new Error(`HTTP 异常: ${response.status} ${response.statusText}`) } status.value = StreamStatus.STREAMING animationFrameId = requestAnimationFrame(flushBuffer) const reader = response.body.getReader() const decoder = new TextDecoder('utf-8') while (true) { const { done, value } = await reader.read() if (done) break const chunk = decoder.decode(value, { stream: true }) bufferText += chunk } // 结束流 status.value = StreamStatus.COMPLETED flushBuffer() options.onFinish?.(bufferText) } catch (err: any) { if (err.name === 'AbortError') { console.log('流式请求已由用户主动取消') } else { status.value = StreamStatus.ERROR errorMessage.value = err.message || '未知流式传输错误' options.onError?.(err) } } finally { abortController = null } } // 组件卸载时自动清理，防止内存泄漏 onUnmounted(() => { stopStream() }) return { textContent, status, errorMessage, sendPrompt, stopStream } }

5. 生产验收 Checklist：前端交付前必须核对的 6 个边界条件

在将 Vue3 全栈 AI 功能合并入主干前，务必对以下 6 个边界条件进行人工或自动化验收卡点检查：

• 打断机制卡点：连续快速点击“重新生成”3 次，控制台网络面板中前 2 次请求必须显示为cancelled，最终界面内容只展示第 3 次响应。
• 路由离开卡点：流式打印中途点击菜单切到其他页面，控制台无未捕获的 Promise 报错，后台 HTTP 连接已断开。
• 异常网络卡点：在 Chrome DevTools 中模拟 Network OffLine，前端状态迅速收敛为 ERROR，且出现明确的重试按钮。
• 极限文本卡点：连续返回 2 万字超长回复，页面滚动时不出现明显卡顿或 FPS 暴跌。
• XSS 安全卡点：模型输出的 Markdown 包含恶意<script>alert(1)</script>标签时，前端 Sanitizer 是否已成功清洗。
• 空响应卡点：后端返回 200 但 response body 为空时，前端能优雅兜底而不是无限处于loading状态。