這是近期我遇到的一個問題，因為需要在一個 Component 上顯示即時文字資料，

所以在 Vue Mounted 階段連接了後端的 Socket 來取得資料，並在 beforeDestroy 的階段

中斷與Socket的連線，本來以為這樣沒甚麼問題，結果出乎我預期的Socket的連線無法終止。

在我切換 Vue Router 到其他頁面時Socket依舊在背景連線著。如果只是這樣可能還好。

但當我再回到原本頁面時就會再一次的觸發 Mounted ，再建立一次連線。

這樣的情形如果多重複幾次，一定是會出問題的。😓

但再嘗試了套件中官方API的兩個關閉連線方法後，依舊不可行。

就改變一下思考模式，其實主要的問題是重複連線，只要不重複連線，應該就沒有問題了吧。🤔

所以我就嘗試在 beforeDestroy 階段將一組判斷用的 key 與 value 存入瀏覽器的 Session Storage。

並且在 Mounted 階段判斷該值是否存在，來決定是否需要建立連線。

最後只要增加在網頁重新整理時將 Session 的值清除掉即可。

因為 Session 本來就會在分頁或瀏覽器關閉時被清空，所以也不用另外做處理。

mounted() {
  const socketLife = sessionStorage.getItem("SocketLife")
  if (socketLife === 'true') {
    console.log("socket 連線已存在")
    return
  } else {
    console.log("socket 連線不存在")
    this.socketConnect()  
  }
},