Vue實現(xiàn)定位并解決內存泄漏

更新時間：2023年09月11日 09:23:46 作者：Sean

Vue.js?是一個流行且強大的?JavaScript?框架,它允許我們構建動態(tài)和交互式?Web?應用程序,本文我們將深入探討?Vue.js?應用程序中內存泄漏的原因,并探索如何定位和修復這些問題的有效策略,希望對大家有所幫助

什么是內存泄漏

當程序執(zhí)行過程中保留不再需要的內存時（主要是一些變量、方法等），會阻止內存被釋放并導致程序的內存使用量隨著時間的推移而增長，稱為內存泄漏。

在 Vue.js 應用程序中，內存泄漏通常是由于組件、全局 EventBus、事件定時器和變量，函數(shù)引用的管理不當而引起的。

1. EventBus 引起的內存泄露

一個老生常談的話題， Vue.js 中跨組件通信，要么是EventBus，要么是Vuex 或者Pinia 這種數(shù)據(jù)流工具。

當我們對 EventBus 使用不當時，它們可能導致內存泄漏。
當組件被銷毀時，應將它們從事件總線中刪除，以防止延遲引用。

舉個例子：

// 組件A.vue
<template>
  <div>
    <button @click="sendMessage">廣播消息</button>
  </div>
</template>
<script>
import { EventBus } from "./EventBus.js";
export default {
  methods: {
    sendMessage() {
      EventBus.$emit("message", "Hello world from A!");
    }
  }
};
</script>
// 組件B.vue
<template>
  <div>
    <p>{{ receivedMessage }}</p>
  </div>
</template>
<script>
import { EventBus } from "./EventBus.js";
export default {
  data() {
    return {
      receivedMessage: ""
    };
  },
  created() {
    EventBus.$on("message", message => {
      this.receivedMessage = message;
    });
  }
};
</script>

在此示例中，發(fā)生內存泄漏是因為 ComponentB 從EventBus訂閱了一個事件，但在該組件被銷毀時并未取消訂閱。

為了解決這個問題，我們需要在組件B 的 beforeDestroy 鉤子中使用 EventBus.$off 來刪除事件監(jiān)聽器。

所以需要對組件B做如下修改:

// ComponentB.vue
<template>
  <div>
    <p>{{ receivedMessage }}</p>
  </div>
</template>
<script>
import { EventBus } from "./EventBus.js";
export default {
  data() {
    return {
      receivedMessage: ""
    };
  },
  created() {
    EventBus.$on("message", message => {
      this.receivedMessage = message;
    });
  },
  beforeDestroy() {
    EventBus.$off("message"); //this line was missing previously
  }
};
</script>

2. 未被清理的定時器

Vue.js 應用程序中內存泄漏的最常見原因之一是未能正確刪除定時器。當組件在其生命周期中使用了定時器，但并未合理的進行清除。

一旦組件被銷毀，定時器會繼續(xù)引用該組件，從而防止其被垃圾收集。

舉個例子：

<template>
   <div>
     <button @click="startShow">開始演示</button>
     <button @click="stopShow">停止演示</button>
   </div>
 </template>
 <script>
 export default {
   data() {
     return {
       intervalId: null
     };
   },
   methods: {
     startLeak() {
       this.intervalId = setInterval(() => {
         // Simulate some activity
         console.log("Interval running...");
       }, 1000);
     },
     stopLeak() {
       clearInterval(this.intervalId);
       this.intervalId = null;
     }
   }
 };
 </script>

在這個例子中，發(fā)生內存泄漏是因為單擊 “開始演示” 按鈕時創(chuàng)建了interval 定時，但在組件被銷毀時沒有正確清理它。

為了解決這個問題，我們需要在 beforeDestroy 生命周期中，對定時器進行清理。

所以最終的代碼將如下所示：

<template>
   <div>
     <button @click="startShow">開始演示</button>
     <button @click="stopShow">停止演示</button>
   </div>
 </template>
 <script>
 export default {
   data() {
     return {
       intervalId: null
     };
   },
   methods: {
     startLeak() {
       this.intervalId = setInterval(() => {
         // Simulate some activity
         console.log("Interval running...");
       }, 1000);
     },
     stopLeak() {
       clearInterval(this.intervalId);
       this.intervalId = null;
     }
   },
@diff new
     beforeDestroy() {
     clearInterval(this.intervalId); // This line is missing above
   }
 };
 </script>

3. 第三方庫使用不當

第三方類庫使用不當，是內存泄漏的最常見原因。

這是由于組件清理不當造成的。這里我使用 Choices.js 庫進行演示。

// cdn Choice Library
 <link rel='stylesheet prefetch' >
 <script src='https://joshuajohnson.co.uk/Choices/assets/scripts/dist/choices.min.js?version=3.0.3'></script>
 // our component
 <div id="app">
   <button
     v-if="showChoices"
     @click="hide"
   >Hide</button>
   <button
     v-if="!showChoices"
     @click="show"
   >Show</button>
   <div v-if="showChoices">
     <select id="choices-single-default"></select>
   </div>
 </div>
 // Script
 new Vue({
   el: "#app",
   data: function () {
     return {
       showChoices: true
     }
   },
   mounted: function () {
     this.initializeChoices()
   },
   methods: {
     initializeChoices: function () {
       let list = []
       // 創(chuàng)造更多的選項，方便直觀的觀察到內存泄漏
       for (let i = 0; i < 1000; i++) {
         list.push({
           label: "選項" + i,
           value: i
         })
       }
       new Choices("#choices-single-default", {
         searchEnabled: true,
         removeItemButton: true,
         choices: list
       })
     },
     show: function () {
       this.showChoices = true
       this.$nextTick(() => {
         this.initializeChoices()
       })
     },
     hide: function () {
       this.showChoices = false
     }
   }
 })

在上面的例子中，

我們加載了一個包含許多選項的下拉列表，然后使用帶有 v-if 指令的顯示/隱藏按鈕來添加它并將其從虛擬 DOM 中刪除。

此示例的問題在于 v-if 指令從 DOM 中刪除了父元素，但我們沒有清理 Choices.js 創(chuàng)建的額外 DOM 片段，從而導致內存泄漏。

我為大家做了一個在線的示例工程，便于大家去觀察內存占用情況。

http://demolab.seanz.net/m-leak/index.html

當多點幾次之后，會有明確的內存增加。附上一張差異圖。

初始化狀態(tài)：

多次點擊狀態(tài)：

識別內存泄漏

識別 Vue.js 應用程序中的內存泄漏可能具有挑戰(zhàn)性，因為它們通常表現(xiàn)為性能緩慢或隨著時間的推移內存消耗增加。沒有神奇的工具可以識別代碼的問題所在。

但是，大多數(shù)現(xiàn)代瀏覽器都提供內存分析工具，允許您拍攝應用程序隨時間的內存使用情況的快照。這些工具可以幫助您識別哪些對象消耗了過多的內存以及哪些組件沒有得到正確的垃圾收集。

Chrome 的 "Heap Snapshot" 等工具可以通過可視化對象引用及其內存消耗來提供對內存使用情況的詳細了解。

這可以幫助您更準確地查明內存泄漏的根源。

如何盡可能避免內存泄漏

正確的使用計時器：確保在 Mounted 生命周期掛鉤期間添加計時器，在組件的 beforeDestroy 鉤子中，進行清除。
EventBus ：當你在組件中使用EventBus時，一定要確保，在組件銷毀鉤子方法中將其從 EventBus 中刪除。
響應式數(shù)據(jù)清理：在 beforeDestroy 生命周期鉤子中，清理響應式數(shù)據(jù)屬性，以防止它們保留對已銷毀組件的引用。
第三方類庫：當使用在 Vue 之外操作 DOM 的其他 3rd 方庫時，通常會發(fā)生這些泄漏。要修復此類泄漏，請正確遵循庫文檔并采取適當?shù)拇胧?/li>