面试题：复杂业务场景下Vue组件beforeDestroy与destroyed的清理策略

Question

假设你正在开发一个实时数据监控的Vue组件，该组件使用WebSocket进行数据实时接收，并在页面上绘制动态图表展示数据。在组件销毁时，需要进行哪些清理工作，分别在beforeDestroy和destroyed钩子函数中如何实现，以确保内存不泄漏和系统的稳定性？

Answer 1

1. 清理工作内容：
   • 关闭WebSocket连接，防止连接持续占用资源，避免内存泄漏。
   • 取消任何与动态图表相关的定时器（如果有），比如定时更新图表数据的定时器，防止定时器在组件销毁后继续运行导致内存泄漏或错误。
   • 解除组件绑定的任何事件监听器，避免事件监听器在组件销毁后仍然绑定，导致内存泄漏或意外行为。
2. 在beforeDestroy钩子函数中的实现：

<template>
  <div>
    <!-- 组件模板内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      webSocket: null,
      chartTimer: null,
      // 其他数据
    };
  },
  beforeDestroy() {
    // 关闭WebSocket连接
    if (this.webSocket) {
      this.webSocket.close();
    }
    // 清除图表相关定时器
    if (this.chartTimer) {
      clearInterval(this.chartTimer);
    }
    // 解除事件监听器（假设存在window的resize事件监听器）
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      // 处理resize事件的逻辑
    }
  }
}
</script>

3. 在destroyed钩子函数中的实现：
   • 在destroyed钩子函数中，可以进一步检查确认清理操作是否成功，例如是否成功关闭了WebSocket连接。虽然在beforeDestroy中已经进行了关闭操作，但在destroyed中可以添加一些日志记录或额外的清理逻辑。

<template>
  <div>
    <!-- 组件模板内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      webSocket: null,
      chartTimer: null,
      // 其他数据
    };
  },
  beforeDestroy() {
    // 关闭WebSocket连接
    if (this.webSocket) {
      this.webSocket.close();
    }
    // 清除图表相关定时器
    if (this.chartTimer) {
      clearInterval(this.chartTimer);
    }
    // 解除事件监听器（假设存在window的resize事件监听器）
    window.removeEventListener('resize', this.handleResize);
  },
  destroyed() {
    if (this.webSocket && this.webSocket.readyState === WebSocket.CLOSED) {
      console.log('WebSocket connection closed successfully in destroyed hook');
    } else {
      console.log('WebSocket connection may not have closed as expected in destroyed hook');
    }
  },
  methods: {
    handleResize() {
      // 处理resize事件的逻辑
    }
  }
}
</script>