快捷導(dǎo)航

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

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

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

什么是內(nèi)存泄漏

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

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

1. EventBus 引起的內(nèi)存泄露

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

當(dāng)我們對 EventBus 使用不當(dāng)時，它們可能導(dǎo)致內(nèi)存泄漏。
當(dāng)組件被銷毀時，應(yīng)將它們從事件總線中刪除，以防止延遲引用。

舉個例子：

// 組件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ā)生內(nèi)存泄漏是因為 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 應(yīng)用程序中內(nèi)存泄漏的最常見原因之一是未能正確刪除定時器。當(dāng)組件在其生命周期中使用了定時器，但并未合理的進(jìn)行清除。

一旦組件被銷毀，定時器會繼續(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ā)生內(nèi)存泄漏是因為單擊 “開始演示” 按鈕時創(chuàng)建了interval 定時，但在組件被銷毀時沒有正確清理它。

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

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

<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. 第三方庫使用不當(dāng)

第三方類庫使用不當(dāng)，是內(nèi)存泄漏的最常見原因。

這是由于組件清理不當(dāng)造成的。這里我使用 Choices.js 庫進(jìn)行演示。

// 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)造更多的選項，方便直觀的觀察到內(nèi)存泄漏
       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 片段，從而導(dǎo)致內(nèi)存泄漏。

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

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

當(dāng)多點幾次之后，會有明確的內(nèi)存增加。附上一張差異圖。

初始化狀態(tài)：

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

識別內(nèi)存泄漏

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

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

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

這可以幫助您更準(zhǔn)確地查明內(nèi)存泄漏的根源。

如何盡可能避免內(nèi)存泄漏

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