Vue 3 实现 AI 流式输出（上篇）：从用户体验说起

在人工智能大模型（LLM）逐渐融入日常开发的今天，如何提供流畅、自然的交互体验，成为前端工程师必须思考的问题。传统的 API 调用方式------等待模型完全生成后再一次性返回结果------虽然实现简单，却让用户在几秒甚至十几秒内面对一片空白，体验割裂。而**流式输出（Streaming）**技术，则让内容"边生成边显示"，仿佛 AI 正在与你实时对话，极大提升了交互的沉浸感与响应速度。

为什么需要流式输出？

大型语言模型的推理过程通常耗时较长。若采用非流式模式，用户需等待整个响应完成才能看到任何内容。这不仅造成心理上的"卡顿感"，也违背了现代 Web 应用"即时反馈"的设计原则。

而启用 stream: true 后，后端会将生成的 token 分批返回，前端则逐段拼接并渲染。用户几乎在点击"发送"后立刻就能看到第一个字，随后文字如打字机般逐字浮现------这种"渐进式呈现"显著降低了感知延迟，带来更"爽"的使用体验。

技术选型：Vite + Vue 3

为了快速搭建一个支持流式输出的前端界面，我们选择当前最高效的前端工具链：Vite 作为构建工具，Vue 3 作为框架。

csharp 复制代码

npm init vite
# 选择 Vue + JavaScript

Vite 基于原生 ES 模块，启动速度极快，无需冗长的打包等待。而 Vue 3 的组合式 API（尤其是 <script setup> 语法糖）让状态管理和模板绑定变得简洁直观，非常适合聚焦业务逻辑的快速原型开发。

响应式数据驱动 UI 更新

在 Vue 3 中，我们使用 ref 创建响应式变量。当变量值变化时，模板中绑定的内容会自动更新，无需手动操作 DOM。

xml 复制代码

<script setup>
import { ref } from 'vue'
const content = ref('')
</script>

<template>
  <div>{{ content }}</div>
</template>

这段代码中，content 是一个响应式引用对象。通过 content.value = "新内容" 赋值后，页面上的 {{ content }} 会立即刷新。这种声明式编程范式，让我们能专注于"数据如何变化"，而非"如何修改 DOM"，极大提升了开发效率和代码可读性。

构建基础交互界面

我们设计一个极简的聊天界面：一个输入框用于提问，一个复选框控制是否启用流式输出，以及一个区域用于展示 AI 回答。

xml 复制代码

<template>
  <input v-model="question" />
  <input type="checkbox" v-model="stream" />
  <button @click="askLLM">提交</button>
  <div>{{ content }}</div>
</template>

这里，v-model 实现了双向数据绑定：输入框的内容实时同步到 question 变量，复选框状态同步到 stream。这种绑定机制让表单处理变得异常简单，也确保了状态的一致性。