随着大语言模型（LLM）的广泛落地，AI 应用已从“点一下等结果”的静态交互，进化为“边生成边展示”的实时流式输出。用户期待看到模型“逐字思考”的过程，而不是面对漫长的白屏等待。这种体验升级的背后，正是流式输出（Streaming）技术的支撑。对前端开发者而言，理解其原理并在 Vue 3 中高效实现，已成为一项必备技能。

什么是流式输出？

传统 HTTP 请求会等待服务器端完整响应后才返回给客户端。而流式输出允许服务器在生成数据的同时，以“块”（chunk）的形式不断推送给前端，前端无需等待全部结果即可开始渲染。在 AI 对话场景中，这表现为文字逐字出现、代码逐步补全、图片渐进清晰等。

核心原理：两种主流方案

目前实现流式输出的主要技术是 Server-Sent Events（SSE） 和 ReadableStream。SSE 基于 HTTP 长连接，服务端通过 text/event-stream 格式持续发送事件，浏览器使用 EventSource API 接收，天然支持断线重连，适合单向推送。而 ReadableStream 是 Fetch API 的一部分，通过 response.body.getReader() 逐块读取二进制数据流，配合 TextDecoder 解码，灵活性更高，适用于需要通过 POST 方法携带复杂参数（如 API Key、对话历史）的场景。

许多大模型 API（如 OpenAI、通义千问）的流式接口采用的就是 Server-Sent Events 格式流，即服务端以 SSE 协议输出 data: {"choices":[{"delta":...}]} 格式的数据块。

Vue 3 实战：从零构建流式对话

关键点在于：当每收到一小块数据时，需要立即更新响应式状态（如 ref 或 reactive），并让组件视图随之刷新，同时不阻塞后续数据接收。

以下是一个基于 fetch + ReadableStream 的简化核心逻辑：

// 使用 fetch 发起流式请求
const response = await fetch(url, { method: 'POST', body: JSON.stringify(payload) });
const reader = response.body.getReader();
const decoder = new TextDecoder();
let partial = '';

while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  const chunk = decoder.decode(value, { stream: true });
  partial += chunk;
  // 解析 SSE 格式：提取 data: 后的 JSON 并获取 delta 字段
  const lines = partial.split('\n');
  for (const line of lines) {
    if (line.startsWith('data: ') && line !== 'data: [DONE]') {
      const json = JSON.parse(line.slice(6));
      const delta = json.choices?.[0]?.delta?.content || '';
      if (delta) {
        // 关键：将 delta 追加到 Vue 响应式变量中
        displayedContent.value += delta;
      }
    }
  }
}

在 Vue 3 组件中，只需将 displayedContent 绑定到模板，例如 <div v-html="displayedContent" />，即可实现实时逐字渲染。

更优雅的方式：借助工具库

如果不想重复处理 SSF 解析和状态管理，可以选用开源库如 VueUse 的 useEventSource（专门支持 SSE），或 AI SDK for Vue（提供了 useChat 组合函数，自动处理流式解析、重试、打字机效果等）。以 @ai-sdk/vue 为例，引入后只需：

const { messages, isLoading, append } = useChat();
// 模板中直接 v-for 渲染 messages 数组，每条消息的 content 会自动增量更新

应用价值与挑战

流式输出极大提升了用户体验——从“等待结果”到“与 AI 同步思考”，还能在长回复中提前展示关键信息，用户可随时中断。但前端也面临挑战：需要处理断线重连、保证渲染性能（大量 DOM 更新可能引发卡顿）、以及适配不同 API 的协议差异。建议使用虚拟列表或防抖策略控制更新频率，同时结合 requestAnimationFrame 优化渲染时机。

结语

AI 时代的交互不再是一次性的请求-响应，而是持续流淌的对话流。掌握流式输出原理，并在 Vue 3 中熟练运用 ReadableStream、SSE 及现代工具库，已成为前端工程师构建智能化应用的核心竞争力。未来随着多模态流式输出（文本 + 语音 + 图像逐帧生成）的普及，这一技能将更加不可或缺。