Event Stream输出优化：Vue3节流函数的正确实现

1. 背景

AI服务采用event stream流式输出内容，这种技术允许数据分块传输，实现实时响应。然而，输出速度存在明显波动，时快时慢的现象频繁发生。这种不稳定的传输节奏导致用户界面内容呈现不连贯，页面元素跳动频繁，严重破坏了用户操作的流畅性和可预期性，最终造成较差的交互体验。

2. 问题描述

2.1 现象说明

在Vue3项目开发过程中，开发者尝试使用lodash库的throttle函数来优化event stream的数据处理流程。目标是通过限流机制实现内容平滑输出，消除数据突增导致的界面抖动。但实际测试发现，当直接在onmessage回调函数中调用_.throttle方法时，节流效果完全未能生效，throttle的回调函数无法被调用，与预期效果不符。

2.2 错误代码示例

<script setup>
import _ from 'lodash'  // 引入lodash工具库

// 事件源的消息处理回调
eventSource.onmessage = function(event) {
    // 错误用法：每次事件触发都创建新节流实例
    _.throttle(function(){
          console.log('Received message:', event.data);  // 直接输出接收到的数据
    }, 100);  // 设置100ms节流间隔
};
</script>

3. 原因分析

3.1 核心问题

上述实现方式存在根本性设计缺陷：每次onmessage事件触发时，都会重新初始化一个新的throttle函数实例。由于JavaScript的垃圾回收机制，前一个节流实例会立即被销毁，无法维持内部计时状态。这导致每个事件都独立执行不受限流约束，完全失去了节流函数的核心功能。本质上，这种写法等同于直接执行普通函数，未能建立持续的节流控制上下文。

4. 解决方案

4.1 正确实现方式

通过将throttle函数提升至组件作用域顶层，确保在组件生命周期内维持单一实例引用：

<script setup>
import _ from 'lodash'  // 引入lodash工具库

// 在组件作用域创建持久节流实例（单例模式）
const throttleRender = _.throttle(function(data){
    console.log('Received message:', data);  // 节流处理后的输出
}, 100);  // 设置100ms节流间隔

// 事件源的消息处理回调
eventSource.onmessage = function(event) {
    throttleRender(event.data);  // 调用已存在的节流实例
};
</script>

4.2 实现原理

该解决方案基于三个关键设计原则：

1. 预初始化机制：在组件创建阶段实例化throttleRender，确保其生命周期与组件同步
2. 引用持久化：事件回调中调用固定实例，避免重复创建销毁的开销
3. 状态持续性：节流函数内部维持执行时间戳状态，实现真正的调用频率控制