说到前端必知必会，AI 流式输出原理与 Vue 实战 🚀

一、先来感受一下：流式 vs 非流式

打开一个 AI 应用，问「帮我写一篇关于中国龙的故事」。点击发送：

• 非流式界面空白，转圈 几秒接下来「啪」一声——整篇文章突然出现。从你心里发毛来看，是不是卡了？网断了，按理说，
• 流式文字像打字机。一个字一个字往外蹦，再看你边看边判断，「嗯，开头不错，继续看。」

总耗时差不多，体验天差地别。话说回来， 原因是——

这就是流式输出的主要价值：不是缩短绝对时间。而是缩短使用者的感知等待时间。 这也是为什么聊天机器人、AI 助手类产品几乎全部采用流式输出——它是 AI 产品的“第一印象”。

📌 知识点速记

二、底层原理——接根管子 💧

水管比喻

• 非流式：= 水库把水全部装进大桶，桶满了再整体运到你面前。你干等着，不知道水什么时候来。
• 流式：= 水管打开，水不停地流过来你边接边用。其实，每一滴水来了你都能立刻看到。

L L M 生成内容是逐 token推理**的——每次只推理下一个最可能的 token。不是一次性「想出」整段话：

"我" → "我今" → "我今天" → "我今天很" → "我今天很开心"

每生成一个 token，就立刻通过「水管」送出去。从整条流水线来看，

NNM 逐 token 推理 → 服务器即刻发送 → 网络传输 → 前端读取 chunk → 拼接到界面

从协议约定来看。stream: true

L L M 流式输出是客户端和服务器之间的SSE 协议约定**：

• 客户端：stream: true,表示「我要用流式方式收数据」。
• S E R V E R：

body: JSON.stringify({
model的观点是，'deepseek-v4-flash',messages:,stream: stream.value // 🔑 就这一个参数，控制流式/非流式
})

从数据格式来看，SSE

L L M 在 HTTP 层面使用 SSE 协议，原始数据长这样：

至于data。{"choices":}
data这方面，{"choices":}
从data来看，{"choices":}
从data来看，

• # 每行以 data: 开头
• # 行之间用空行 分隔
• # 是结束信号
• # 单向通信：服务器→客户端，客户端不需要再发请求

三、为什么要从 零 搭建？—— Agent 时代的项目初始化

在动手写代码之前，先聊聊思想层面的东西。说起来，

不要从 零 写 Vue 项目

进入 Agent 开发时代。我们没必要从空白文件开始手写 index.html` 、 `App.vue`。至于应该，

1. 用 `npm create vite@latest` 一键生成项目脚手架
2. 或者去 GitHub 拉一个模板项目

把项目初始化**这种体力活交给工具。把精力留给业务逻辑**。

热更新

Vite 开发服务器提供热更新能力：**文件修改→自动局部刷新**。改了 `HelloWorld.vue`。浏览器里立刻看到效果，不用手动刷新页面。不过，这是现代前端开发的基础体验。

四、Vue 极速入门📗

在看主要代码前，用 **分钟搞懂 Vue **。

<. vue>/单文件组件的三大块

一个 `.vue` 文件就像一块乐高积木**。把 HTML、CSS、JS 封装在一起，形成一个可复用的组件（Component)**。按理说，

┌────────────────────────────────┐
│  │ 可绑定事件 @click
│ │
│  │ ref 创建响应式数据
│ │
│ │
└────────────────────────────────┘

组件是构成页面的最小工作单元**——不再以 HTML 标签为粒度，而是以「一个有独立功能的积木块」为粒度。

根据数据调整思想

再看古老做法，

document.getElementById.innerHTML = '新内容';// 手动改，累且易出错

Vue 做法：

{{ content }}

const content = ref;// 创建一个响应式数据
content.value = '新内容';// 只改数据，不用管 DOM！Vue 帮你更新界面

这就是根据数据调整视图**——你只管数据，界面自动跟上。

响应式

& # x37;ref & # x37;ref > 包裹的数据是* 的。ref 返回一个 RefImpl 对象，实际值存在 .value 里。当 .value 改变时，页面上所有绑定了这个 数据 的地方都会 *。