Vue內存泄漏的識別和解決方案

更新時間：2023年11月08日 10:27:28 作者：人貓神話

Vue是人氣爆棚且地表最強的JS（JavaScript）框架,祂允許我們構建動態(tài)交互式的Web App,然但是,和任何軟件雷同,Vue App偶爾會遭遇內存泄漏,導致性能暴跌和意外行為,今天,我們將深入Vue App內存泄漏的原因,并探討識別和修復這些問題的錦囊妙計

內存泄漏是什么鬼物？

當程序無意中保留不再需要的內存時，這會阻礙內存釋放并導致 App 的內存占用與日俱增，稱為內存泄漏（memory leak）。在 Vue App 中，內存泄漏通常是由于組件、全局事件總線、事件監(jiān)聽器和引用的管理不當而引起的。

讓我們通過若干示例來演示 Vue App 中的內存泄漏以及如何修復祂們。

1. 全局事件總線泄漏

雖然全局事件總線對組件間通信很有用，但如果管理不當，祂們也可能導致內存泄漏。當組件銷毀時，應該將祂們從事件總線中刪除，防止引用茍且偷生。

舉個栗子：

在此示例中，發(fā)生內存泄漏是因為 ComponentB 從全局事件總線訂閱了一個事件，但當?shù)k銷毀時并未退訂。為了解決此問題，我們需要在 ComponentB 的 beforeDestroy 鉤子中使用 EventBus.$off 移除事件監(jiān)聽器。所以 ComponentB 將如下所示：

2. 事件監(jiān)聽器未釋放

Vue App 內存泄漏最常見的原因之一是未能正確移除事件監(jiān)聽器。當組件在其生命周期中附加事件監(jiān)聽器但無法刪除祂們時。當組件銷毀時，監(jiān)聽器會繼續(xù)引用該組件，防止其被垃圾回收。

舉個栗子：

這里，發(fā)生內存泄漏是因為單擊“Start Memory Leak”按鈕時創(chuàng)建了事件監(jiān)聽器（定時器），但組件銷毀時沒有正確移除祂。為了解決此問題，我們需要在 beforeDestroy 生命周期鉤子中清除定時器。所以最終的代碼將如下所示：

3. 外部第三方庫

這是內存泄漏最常見的原因。這是由于組件清理不當造成的。這里我使用 Choices.js 庫進行演示。

上述示例中，我們加載了一個包含一大坨選項的選擇框，然后使用帶有 v-if 指令的顯示/隱藏按鈕來添加祂并將其從虛擬 DOM 中刪除。此示例的問題在于 v-if 指令從 DOM 中刪除了父元素，但我們沒有清理 Choices.js 創(chuàng)建的額外 DOM 片段，從而導致內存泄漏。

要觀察該組件的內存占用，請在 Chrome 瀏覽器上打開該項目，然后導航到 Chrome 任務管理器，如果您單擊“顯示/隱藏”按鈕，那么每次單擊時，當前標簽頁的內存占用都會增加，即使您停止單擊，祂也會增加不釋放占用的內存。

以下是用于演示目的的 Chrome 任務管理器內存占用的快照：

單擊“顯示/隱藏”按鈕之前:

單擊兩個標簽頁的“顯示/隱藏”50-60 次后：

識別內存泄漏

識別 Vue App 的內存泄漏可能富有挑戰(zhàn)性，因為祂們通常表現(xiàn)為慢如龜速的性能或與日俱增的內存消耗。沒有神奇的工具可以識別代碼的 bug。

雖然但是，大多數(shù)現(xiàn)代瀏覽器都有提供內存分析工具，這允許您拍攝 App 內存占用時間軸的快照。這些工具可以幫助您識別哪些對象消耗了過多的內存以及哪些組件沒有妥當?shù)睦厥铡?/p>

Chrome 的“堆快照”等工具可以通過可視化對象引用及其內存消耗來提供對內存占用的詳情。這可以幫助您更精準地洞悉內存泄漏的根源。

修復 Vue App 的內存泄漏

妥當?shù)氖录O(jiān)聽器管理：確保在組件的 mounted 生命周期鉤子中添加事件監(jiān)聽器，并在 beforeDestroy 鉤子中移除事件監(jiān)聽器。
循環(huán)引用解析：在組件間創(chuàng)建循環(huán)引用時要小心。如有必要，請確保在銷毀組件時破壞循環(huán)引用。
全局事件總線清理：當使用恰當?shù)纳芷阢^子銷毀組件時，請將其從全局事件總線中移除。
響應式數(shù)據(jù)清理：使用 beforeDestroy 生命周期鉤子來清理響應式數(shù)據(jù)屬性，防止祂們保留對已銷毀組件的引用。
第三方庫：當使用 Vue 之外的操作 DOM 的其他第三方庫時，這些泄漏通常會出現(xiàn)。要修復此類泄漏，請正確遵循庫文檔并采取妥當?shù)拇胧?/li>