前端渐进式框架前端生态与全栈应用架构：从真实需求拆出第一个验证点- 惊觉

前端渐进式框架前端生态与全栈应用架构：从真实需求拆出第一个验证点

当一个前端 AI 检索组件同时承担 UI、SSE 流处理、检索参数、Token 窗口和 Markdown 修补时，职责会过于集中。样式变更或网络波动都可能影响流式渲染，应将这些职责拆分。

在 Vue3 生态里构建 AI 增强型全栈应用，最核心的原则就是不要把非确定性的流交互与 UI 渲染死绑定。拆分出职责明确的最小可运行架构（MVP），比一上来设计大而全的框架管用得多。

1. 复杂度是怎样一步步失控的

当我们在 Vue3 项目里接入 LLM 检索或上下文编排时，前端通常要面对四个交织在一起的流程：

首先是上下文搜集与剪裁。页面当前选中的文本、用户历史对话、知识库检索的 Context 片段，需要按优先级组装。

其次是流式传输状态控制。SS-EventSource 或 Fetch ReadableStream 的读取、打字机打字效果渲染、中途用户手动取消请求。

再次是UI 状态机的切换。从 Idle（空闲）、Searching（检索中）、Generating（生成中）到 Error（异常降级）。

如果把这些全部塞进 .vue 单文件组件，响应式依赖追踪会变得极其混乱。打字机效果频繁触发 Vue 的响应式更新，很容易拖慢 DOM 渲染帧率。

2. 职责拆分：三层收口设计

要让架构保持极简，应当在前端建立清晰的职责隔离：

UI 组件层（View）：只负责接收用户输入、触发 Action，以及把最终的 Markdown 文本吐给渲染器。绝对不直接处理网络流。
逻辑组合层（Composable）：封装 useLLMStream 组合式函数，管理 Fetch 流读取、打字机队列缓冲、错误拦截以及取消请求的控制句柄。
数据缓冲与管道（Stream Buffer）：避免每一个 Token 到达都触发 Vue ref 更新。将高频推送的字符先放入 Queue，配合 requestAnimationFrame 批量刷新到 DOM 响应式变量中。

下面这段 TypeScript 代码展示了如何在 Vue3 中实现一个高性能、具备自动缓冲与中止控制的 useLLMStream 组合式 API：

import { ref, shallowRef, onUnmounted } from 'vue';

export interface StreamOptions {
  apiEndpoint: string;
  onSuccess?: () => void;
  onError?: (err: Error) => void;
}

export function useLLMStream(options: StreamOptions) {
  const content = ref<string>('');
  const isGenerating = ref<boolean>(false);
  const error = shallowRef<Error | null>(null);

  let controller: AbortController | null = null;
  let animationFrameId: number | null = null;
  let textBuffer = '';

  // 批量刷新缓冲区的字符到 Vue 响应式 ref，避免 DOM 高频微刷新卡顿
  const flushBuffer = () => {
    if (textBuffer.length > 0) {
      content.value += textBuffer;
      textBuffer = '';
    }
    if (isGenerating.value) {
      animationFrameId = requestAnimationFrame(flushBuffer);
    }
  };

  const startStream = async (prompt: string, contextTokens: string[] = []) => {
    // 重置状态
    content.value = '';
    error.value = null;
    isGenerating.value = true;
    textBuffer = '';

    controller = new AbortController();

    try {
      const response = await fetch(options.apiEndpoint, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ prompt, context: contextTokens }),
        signal: controller.signal,
      });

      if (!response.ok || !response.body) {
        throw new Error(`Server returned status HTTP ${response.status}`);
      }

      const reader = response.body.getReader();
      const decoder = new TextDecoder('utf-8');

      // 启动 rAF 渲染循环
      animationFrameId = requestAnimationFrame(flushBuffer);

      while (true) {
        const { value, done } = await reader.read();
        if (done) break;

        const chunk = decoder.decode(value, { stream: true });
        textBuffer += chunk;
      }

      options.onSuccess?.();
    } catch (err: any) {
      if (err.name === 'AbortError') {
        console.log('[Stream] User aborted stream read execution.');
      } else {
        error.value = err instanceof Error ? err : new Error(String(err));
        options.onError?.(error.value);
      }
    } finally {
      isGenerating.value = false;
      // 确保缓冲区最后剩余内容刷完
      if (textBuffer.length > 0) {
        content.value += textBuffer;
        textBuffer = '';
      }
      if (animationFrameId !== null) {
        cancelAnimationFrame(animationFrameId);
        animationFrameId = null;
      }
    }
  };

  const abort = () => {
    if (controller) {
      controller.abort();
      controller = null;
    }
  };

  onUnmounted(() => {
    abort();
    if (animationFrameId !== null) {
      cancelAnimationFrame(animationFrameId);
    }
  });

  return {
    content,
    isGenerating,
    error,
    startStream,
    abort,
  };
}

3. 在最小架构上实现上下文编排

拆清了流式传输之后，上下文编排（Context Orchestration）就变得顺理成章。

不要在前端搞复杂的本地向量数据库计算。前端只需要做好轻量级上下文提取：

在发起 startStream 请求时，收集三类数据：

用户在 Editor 中激活选中的 20 行代码片段；
关联文件的路径与类型（如 .vue 或 .ts）；
当前对话窗口最近 3 轮的摘要。

组合式函数拿到这些数据后，统一传递给后端 Gateway。由后端网关完成知识库召回（RAG）和 Prompt 拼接，最后将结果按 SSE 格式吐还给前端。

这样一来，前端 Vue3 组件始终保持轻量，即使以后后端的向量检索算法从 Faiss 换成了 Milvus，前端不需要修改一行代码。

4. 保持前端架构干净的三要素

在 Vue3 项目中落地 AI 检索组件，建议遵循以下三条准则：

第一，界面归界面，流传输归 Composable。任何网络流逻辑不要混在组件的 <script setup> 顶部。

第二，高频字符渲染应当做动画帧缓冲。直接把 API 推送的字符写进响应式变量，会引发严重的视图重排卡顿。

第三，做好 Abort 销毁机制。用户切换页面或关闭弹窗时，应当立刻中断 HTTP 连接，避免后台无谓消耗 Token。

转载自 CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/qq_34803115/article/details/163858481

前端渐进式框架前端生态与全栈应用架构：从真实需求拆出第一个验证点