面试题：Vue中onMounted与onUnmounted在复杂场景下的应用

Question

假设你正在开发一个具有实时数据更新的Vue应用，数据通过WebSocket获取。在这个场景中，如何合理地使用onMounted和onUnmounted生命周期钩子来处理WebSocket的连接和断开，以确保数据的及时获取和资源的正确释放？请描述实现思路并给出关键代码片段。

Answer 1

实现思路

1. 在 onMounted 中建立 WebSocket 连接：
   • 创建 WebSocket 实例，并指定服务器地址。
   • 监听 WebSocket 的 open 事件，在连接成功时可以选择发送初始化消息。
   • 监听 message 事件，当接收到服务器发送的数据时，更新 Vue 组件的数据。
2. 在 onUnmounted 中断开 WebSocket 连接：
   • 调用 WebSocket 实例的 close 方法关闭连接，以释放资源，避免内存泄漏。

关键代码片段

<template>
  <div>
    <!-- 这里展示从 WebSocket 获取的数据 -->
    <p>{{ receivedData }}</p>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';

const receivedData = ref('');
let socket;

onMounted(() => {
  socket = new WebSocket('ws://your-server-url');
  socket.onopen = () => {
    console.log('WebSocket 连接已建立');
    // 可以在此处发送初始化消息，例如：
    // socket.send('init');
  };
  socket.onmessage = (event) => {
    receivedData.value = event.data;
  };
});

onUnmounted(() => {
  if (socket) {
    socket.close();
    console.log('WebSocket 连接已关闭');
  }
});
</script>