切换页面时Vue Router重复挂载导致Socket监听重复问题求助

兄弟，这问题我太熟了——你每次切回Page1时，组件都会重新走一遍挂载流程，mounted()里的Socket连接代码重复执行，但之前创建的Socket连接压根没被关掉，导致多个连接同时盯着同一个事件，自然就会重复触发了。而且你说日志输出次数递增，正好说明每次切换回来都会生成一个新的Page1组件实例，旧实例的资源没被清理干净。

下面给你几个靠谱的解决方案，按需选就行：

方案一：组件销毁时主动清理Socket连接（最通用） #

这是最直接的思路：既然每次挂载都会新建连接，那卸载组件的时候就把旧连接关掉，避免残留。你只需要在Page1.vue里加上beforeUnmount或者unmounted钩子，在里面关闭Socket连接并释放引用。

示例代码：

<template>
  <!-- 你的页面内容 -->
</template>

<script>
export default {
  data() {
    return {
      socket: null // 把Socket实例存在data里，方便后续清理
    }
  },
  mounted() {
    // 初始化Socket连接并绑定监听
    this.socket = new WebSocket('ws://你的Socket地址');
    this.socket.onmessage = (event) => {
      console.log('收到Socket消息:', event.data);
      // 这里写你的业务逻辑
    };
    console.log('Page1.vue mounted');
  },
  beforeUnmount() {
    // 组件卸载前关闭连接
    if (this.socket) {
      this.socket.close();
      this.socket = null; // 释放引用，帮助GC回收
    }
  }
}
</script>

方案二：用状态管理统一维护全局Socket（适合多页面共用） #

如果你的Socket是全局共用的，不想每次切换页面都重新创建连接，可以把Socket实例放到Vuex或者Pinia里，只初始化一次，组件只负责绑定/解绑监听事件。

拿Pinia举例子：

// stores/socketStore.js
import { defineStore } from 'pinia';

export const useSocketStore = defineStore('socket', {
  state: () => ({
    socket: null,
    isConnected: false
  }),
  actions: {
    // 初始化Socket，确保只创建一次
    initSocket() {
      if (!this.socket || this.socket.readyState === WebSocket.CLOSED) {
        this.socket = new WebSocket('ws://你的Socket地址');
        this.socket.onopen = () => {
          this.isConnected = true;
        };
        this.socket.onclose = () => {
          this.isConnected = false;
        };
      }
    },
    // 绑定消息监听
    bindMessageListener(callback) {
      if (this.socket) {
        this.socket.onmessage = callback;
      }
    },
    // 解绑消息监听
    unbindMessageListener() {
      if (this.socket) {
        this.socket.onmessage = null;
      }
    }
  }
});

然后在Page1.vue里使用：

<script>
import { useSocketStore } from '@/stores/socketStore';
import { onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    const socketStore = useSocketStore();

    onMounted(() => {
      socketStore.initSocket();
      // 绑定自定义的消息处理逻辑
      socketStore.bindMessageListener((event) => {
        console.log('收到Socket消息:', event.data);
        // 你的业务逻辑
      });
      console.log('Page1.vue mounted');
    });

    onBeforeUnmount(() => {
      // 离开页面时解绑监听，避免影响其他页面
      socketStore.unbindMessageListener();
    });

    return {};
  }
}
</script>

方案三：用keep-alive缓存组件（避免重复创建实例） #

如果你希望Page1切换后不被销毁，可以用<keep-alive>包裹<router-view>，这样组件只会挂载一次，mounted也只执行一次，自然不会重复创建Socket连接。

修改App.vue：

<template>
  <div id="app">
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

注意：用了keep-alive后，组件不会触发beforeUnmount和unmounted，而是会触发deactivated（离开页面时）和activated（回到页面时）钩子。所以如果需要在离开时暂停监听，记得在deactivated里处理，回到页面时在activated恢复。

Page1.vue示例：

<script>
export default {
  data() {
    return {
      socket: null,
      messageHandler: null // 把监听函数存起来，方便复用
    }
  },
  mounted() {
    this.socket = new WebSocket('ws://你的Socket地址');
    this.messageHandler = (event) => {
      console.log('收到Socket消息:', event.data);
    };
    this.socket.onmessage = this.messageHandler;
    console.log('Page1.vue mounted');
  },
  deactivated() {
    // 离开页面时移除监听
    if (this.socket) {
      this.socket.onmessage = null;
    }
  },
  activated() {
    // 回到页面时恢复监听
    if (this.socket) {
      this.socket.onmessage = this.messageHandler;
    }
  }
}
</script>

最后给你个选型建议： #

• 要是每个页面用独立的Socket连接，优先选方案一，简单直接；
• 要是多个页面共用同一个Socket，选方案二，统一管理更省心；
• 要是希望保留页面状态、避免重复渲染，选方案三，配合钩子处理监听就行。

内容的提问来源于stack exchange，提问作者Timo002