在 ChatGPT 横空出世的一年多里，AI 流式输出（Streaming Output）几乎成了所有大模型应用的标配。用户敲下一段提示词，结果不是等上几秒后“啪”地弹出一整段文字，而是像打字机一样逐字浮现。这种“边生成边展示”的体验背后，究竟藏着怎样的前端技术？本文以“接一根水管”的比喻切入，带你彻底搞懂 AI 流式输出的原理，并手把手拆解 Vue 3 实战方案。

从“水桶提水”到“水管送水”

要理解流式输出，先要回顾传统的 HTTP 请求模式。以往前端调 API，好比用桶去井边打水：你发出请求，服务器花时间把整桶水（全部数据）灌满，再一次性端给你。这个过程里，用户只能干等，直到响应结束才能展示结果。

而流式输出则像接了一根水管。你拧开水龙头（发起请求），水（数据）就开始源源不断地流出来。服务器一边计算，一边把已经生成的 token（文字碎片）推送给前端，前端拿到一点就渲染一点。用户几乎感受不到等待，体验从“黑盒加载”变成了“实时涌现”。

这根“水管”的核心技术就是 Server-Sent Events（SSE） 或 Fetch API 配合 ReadableStream。前者是浏览器原生的单向推送通道，后者则更灵活，能兼容 Post 请求和自定义 Header——这也是当前大模型接口（如 OpenAI、文心一言、通义千问）最主流的方式。

前端工程师的“管道工”手册

从纯前端视角看，实现流式输出的关键就两步：发起可读流的请求，逐步读取并消费数据块。

以 Fetch 为例，前端只需在请求时设置 responseType: 'stream'（或直接读取 response.body.getReader()），就能获得一个 ReadableStream。之后通过 reader.read() 不断获取新的 Uint8Array，解码成文本后拼接、更新页面。整个过程完全由客户端驱动，服务器数据的推送节奏决定了界面的“打字速度”。

需要注意的是，流式数据通常是“分块传输编码”（chunked transfer encoding）。每个 chunk 可能包含一条或多条 JSON 片段，需要按行解析。常见格式如 data: {"content":"你好"}，前端需要实时拆包、提取内容字段。

Vue 3 实战：让响应式流“活”起来

理论讲完，具体到 Vue 3 项目，我们如何优雅地接入一根“AI 水管”？

第一步，设计响应式状态。在组合式 API 中，用 ref('') 保存当前已输出的文本，用 ref(false) 控制加载状态。当点击发送按钮时，重置内容，开启请求。

第二步，发起流式请求。使用 fetch 传入 signal（用于中断），设置 headers 携带 API Key 和流式标识。关键代码如：

const response = await fetch(url, { method: 'POST', body, headers });
const reader = response.body.getReader();
const decoder = new TextDecoder();
let done = false;
while (!done) {
  const { value, done } = await reader.read();
  if (!done) {
    const chunk = decoder.decode(value, { stream: true });
    // 解析 chunk 中的文本片段，追加到 content.value
  }
}

第三步，处理边界场景。用户可能中途停止生成，此时调用 abortController.abort() 终止 fetch；网络异常时需捕获错误并提示；如果后端返回了错误流数据（如 token 超限），前端要能解析 error 字段并展示给用户。

第四步，性能与体验优化。对于长文本，可考虑使用 requestAnimationFrame 或微任务调度更新，避免过多 DOM 重绘。另外增加光标闪烁动画，营造“正在打字”的沉浸感。

流式输出并非万能

尽管流式输出极大提升了交互感，但并非所有场景都适用。例如，需要完整上下文才能做判断的问答（如代码审查），流式中间结果可能误导用户；算力不足时，服务器流式推送可能反而变慢。此外，前端对流的解析与错误处理比普通请求更复杂，需要额外编写健壮的“管道工”代码。

未来：从水管到智能管道

随着 AI 应用的普及，流式输出已成为高级前端工程师的必备技能。Vue 生态中已出现 @vueuse/core 的 useFetch 和第三方库 vue-use-stream-api，能进一步简化开发。但理解底层原理——水管怎么接、水怎么流——才是应对各种定制需求的不二法门。

当你的 Vue 3 应用里，AI 对话框开始一个字一个字地“跳”出来时，别忘了，那根看不见的水管里，正流淌着属于前端的创新之力。