快捷導(dǎo)航

Vue內(nèi)存泄漏的識別和解決方案

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

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

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

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

讓我們通過若干示例來演示 Vue App 中的內(nèi)存泄漏以及如何修復(fù)祂們。

1. 全局事件總線泄漏

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

舉個栗子：

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

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

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

舉個栗子：

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

3. 外部第三方庫

這是內(nèi)存泄漏最常見的原因。這是由于組件清理不當(dāng)造成的。這里我使用 Choices.js 庫進(jìn)行演示。

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

要觀察該組件的內(nèi)存占用，請?jiān)?Chrome 瀏覽器上打開該項(xiàng)目，然后導(dǎo)航到 Chrome 任務(wù)管理器，如果您單擊“顯示/隱藏”按鈕，那么每次單擊時，當(dāng)前標(biāo)簽頁的內(nèi)存占用都會增加，即使您停止單擊，祂也會增加不釋放占用的內(nèi)存。

以下是用于演示目的的 Chrome 任務(wù)管理器內(nèi)存占用的快照：

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

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

識別內(nèi)存泄漏

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

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

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

修復(fù) Vue App 的內(nèi)存泄漏

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