流式输出完全指南：让 AI 对话像打字机一样流畅
你有没有想过，为什么 ChatGPT 或 DeepSeek 在回答问题时，不是一口气把答案全扔出来，而是像真人打字一样，一个字一个字地往外蹦？这种体验背后，其实藏着一个很精妙的设计——流式输出（Streaming），也就是我们常说的 SSE（Server-Sent Events）。
说到这儿，可能有人会问：这玩意儿到底有什么用？直接用 JSON 一次性返回不好吗？好，但不够好。想象一下，你去问一个复杂的逻辑问题，大模型需要花个几秒甚至十几秒来推理。如果这段时间屏幕上一直是一个转圈圈的状态，用户大概率会关掉页面。而流式输出，就像是在回答者和聆听者之间拉了一根水管，水龙头一开，答案就源源不断地流出来，用户能第一时间看到内容，体验感瞬间拉满。
这篇文章，我们就来彻底拆解流式输出的实现细节。从 Vue 3 的基础概念，到 fetch API 的底层操作，再到 ReadableStream、TextDecoder、Buffer 缓冲这些核心组件，手把手带你走完整个流程。
流式输出是什么？AI 对话的“打字机”效果
流式输出，说白了就是让 AI 像打字机一样，一边想一边往外蹦字。与之相对的，是非流式输出——模型把整段话都憋完了，再一口气吐给你。
| 对比维度 | 非流式（stream: false） | 流式（stream: true） |
|---|---|---|
| 返回方式 | LLM 生成完整结果后，一次性返回 | LLM 生成一点，就传输一点 |
| 用户体验 | 等待完整响应，然后突然显示 | 逐字显示，体验流畅 |
| 网络传输 | 单次大块传输 | 多次小块传输（分块） |
| 前端处理 | response.json() 直接解析 | response.body 流式读取 + 解码 |
从实现角度来看，非流式处理的耗时主要来自 Transformer 推理和问题复杂度。如果用户一直干等，体验确实不怎么样。流式输出的优化思路其实很简单：不用一次性给出，而是逐个 token 推理生成，实时展示。说白了，就是在 LLM 和客户端之间接了一根“水管”，生成的 token 像水流一样不断流向客户端。前端工程师需要做的，就是在这根水管上安装一个读取器，把水接住并展示出来。
Vue 3 基础：组件化与数据绑定
在开始流式输出之前，先简单回顾一下 Vue 3 的基础概念。Vue 3 是前端第二流行的框架（React 是第一），两者都具备三个核心思想：组件化、数据绑定、响应式。
组件化：页面的最小工作单元
传统开发以 HTML 标签为最小单位，但标签太小、太多，难以维护。Vue 把.vue文件作为组件——一个组件封装了 HTML、CSS、JS 三部分，形成一个可复用、好维护的业务单元。
.vue 文件的三部分
html
复制代码<template>
template><script setup>
// 逻辑：数据和行为
script><style>
/* 样式：作用于当前组件 */
style>
数据绑定与响应式
Vue 的核心是数据驱动——你只需要修改数据，页面自动更新。三种数据绑定语法：
| 语法 | 用途 | 数据流向 |
|---|---|---|
{{ }} | 内容区显示数据 | 单向：JS → 页面 |
: / v-bind | 标签属性绑定 | 单向：JS → 属性 |
v-model | 表单双向绑定 | 双向：JS ↔ 页面 |
v-model是 Vue 中最常用的指令之一。它让表单输入和 JS 数据保持同步——用户在输入框中打字，数据自动更新；数据被修改，输入框自动刷新。这就是“数据驱动”的核心：我们只需要关注数据，界面会自动跟随。
html
复制代码v-model="question" />
在