快捷導(dǎo)航

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

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

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

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

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

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

1. 全局事件總線泄漏

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

舉個(gè)栗子：

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

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

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

舉個(gè)栗子：

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

3. 外部第三方庫(kù)

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

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

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

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

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

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

識(shí)別內(nèi)存泄漏

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

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

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

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

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