vue3流式输出

### 使用 Vue3 实现流式输出 #### 安装依赖项 为了实现流式输出功能，在项目中需引入 `vue-sse` 这一库来简化服务器发送事件（Server-Sent Events, SSE）的操作[^2]。 ```bash npm install vue-sse ``` #### 配置 main.ts 文件 接下来修改项目的入口文件 `main.ts` 来注册插件并启用对于较旧浏览器的支持： ```typescript import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import store from './store' import router from './router' import VueSSE from 'vue-sse' const app = createApp(App) app.use(ElementPlus) .use(store) .use(router) .use(VueSSE, { polyfill: true // 启用polyfill支持更广泛的浏览器兼容性 }) app.mount('#app') ``` #### 创建 Chat 组件用于展示消息 创建一个新的组件 `Chat.vue`, 下面是一个简单的例子展示了如何接收来自服务端的消息并通过模板渲染到页面上: ```html <template> <div class="chat-container"> <!-- 显示接收到的信息 --> <ul id="message-list"> <li v-for="(msg,index) in messages" :key="index">{{ msg }}</li> </ul> <!-- 输入框和提交按钮 --> <input type="text" placeholder="Type your message..." /> <button @click="sendMessage">Send</button> </div> </template> <script lang="ts"> import { defineComponent, ref, onMounted, onUnmounted } from 'vue'; export default defineComponent({ name: 'Chat', setup() { let eventSource; const messages = ref([] as string[]); function connectToStream(url:string){ if(eventSource){eventSource.close();} eventSource=new EventSource(url); eventSource.onmessage=(e)=>{ messages.value.push(e.data); }; eventSource.onerror=()=>{ console.error('Error occurred while connecting to the stream.'); disconnect(); } } function sendMessage(){ // 发送消息逻辑... } function disconnect(){ if(eventSource && eventSource.readyState===1){ eventSource.close(); } } onMounted(() => { connectToStream('/api/stream'); }); onUnmounted(()=>{ disconnect(); }); return{ messages, sendMessage } }, }) </script> ``` 此代码片段定义了一个名为 `Chat` 的Vue组件，该组件通过建立与指定URL的服务端通信连接来监听新消息，并将其追加至列表中显示给用户。当组件被卸载时会自动断开与服务端的链接以释放资源。 #### 处理错误情况 值得注意的是，在实际应用过程中可能会遇到各种异常状况，比如网络中断等问题。因此建议开发者们在处理这些场景时能够更加健壮地捕获可能出现的问题，并给出相应的提示信息给前端使用者知晓当前状态[^3]。