在 Vue 2 中被动接收后端服务器发送的数据，而不是主动发起请求获取数据。

在 Vue 2 中被动接收后端服务器发送的数据，而不是主动发起请求获取数据，通常涉及到使用 WebSocket 或者 Server-Sent Events (SSE) 技术。这两种技术允许服务器向客户端推送更新，非常适合实时性要求较高的应用场景，如即时通讯、实时数据更新等。

使用 WebSocket 实现

WebSocket 提供了全双工通信通道，允许服务器和客户端之间进行实时双向通信。

安装依赖

Vue 本身不直接支持 WebSocket，但你可以使用原生的 WebSocket API 或者通过安装第三方库来简化操作。这里我们直接使用原生 WebSocket API。

示例代码

<template>
  <div>
    <ul>
      <li v-for="(message, index) in messages" :key="index">{{ message }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      socket: null,
      messages: []
    };
  },
  created() {
    // 创建 WebSocket 连接
    this.socket = new WebSocket('ws://yourserveraddress');

    // 监听连接打开事件
    this.socket.onopen = () => {
      console.log('WebSocket connection opened');
    };

    // 监听消息接收事件
    this.socket.onmessage = (event) => {
      const message = JSON.parse(event.data);
      this.messages.push(message.content); // 假设后端发送的数据格式为 {content: 'some content'}
    };

    // 监听连接关闭事件
    this.socket.onclose = () => {
      console.log('WebSocket connection closed');
    };
  },
  beforeDestroy() {
    // 确保组件销毁前关闭 WebSocket 连接
    if (this.socket) {
      this.socket.close();
    }
  }
};
</script>

使用 Server-Sent Events (SSE)

SSE 是一种较简单的服务器推技术，适用于只需要服务器向客户端单向发送更新的场景。

示例代码

<template>
  <div>
    <ul>
      <li v-for="(message, index) in messages" :key="index">{{ message }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      eventSource: null,
      messages: []
    };
  },
  mounted() {
    // 创建 EventSource 实例
    this.eventSource = new EventSource('/your-sse-endpoint');

    // 监听消息接收事件
    this.eventSource.onmessage = (event) => {
      const message = JSON.parse(event.data);
      this.messages.push(message.content); // 假设后端发送的数据格式为 {content: 'some content'}
    };

    // 可选：监听连接打开事件
    this.eventSource.addEventListener('open', () => {
      console.log('SSE connection opened');
    });

    // 可选：监听错误事件
    this.eventSource.addEventListener('error', () => {
      console.error('SSE error occurred');
      this.eventSource.close(); // 遇到错误时关闭连接
    });
  },
  beforeDestroy() {
    // 确保组件销毁前关闭 SSE 连接
    if (this.eventSource) {
      this.eventSource.close();
    }
  }
};
</script>

注意事项

• 安全性：无论是使用 WebSocket 还是 SSE，都需要确保连接的安全性，特别是在生产环境中应考虑使用 WSS（WebSocket Secure）或 HTTPS 来加密通信。
• 心跳检测：为了保持连接活跃，可能需要实现心跳机制来定期发送消息检查连接状态。
• 重连逻辑：对于不稳定的网络环境，应该添加重连机制以增强应用的健壮性。

根据你的具体需求选择合适的技术方案。如果需要更复杂的消息处理机制，WebSocket 可能是更好的选择；而对于简单的通知或者更新流，SSE 则更为简便。