vue怎么接收sse的数据

在Vue中接收SSE的数据，需要使用EventSource对象。EventSource是浏览器提供的内置对象，用于从服务器接收事件推送。

以下是一个基本的示例：

<template>
  <div>
    <ul>
      <li v-for="message in messages" :key="message.id">{{ message.text }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: []
    };
  },
  mounted() {
    const eventSource = new EventSource("http://example.com/sse");

    eventSource.onmessage = event => {
      const message = JSON.parse(event.data);
      this.messages.push(message);
    };
  }
};
</script>

在这个示例中，mounted钩子用于初始化EventSource对象，并在接收到SSE事件时将数据解析为JSON对象并将其添加到组件的messages数组中。 然后，使用v-for指令将消息渲染为列表项。

注意：在Vue中使用EventSource对象时，必须确保在组件卸载时关闭EventSource连接，以避免内存泄漏。可以在beforeDestroy钩子中关闭连接。

beforeDestroy() {
  eventSource.close();
}