vue:內(nèi)存泄露詳解
更新時(shí)間：2021年10月09日 16:38:29 作者：閑敲代碼賺花花
這篇文章主要介紹了一個(gè)Vue的內(nèi)存泄露詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
什么是內(nèi)存泄露？?jī)?nèi)存泄露是指new了一塊內(nèi)存，但無(wú)法被釋放或者被垃圾回收。new了一個(gè)對(duì)象之后 ，它申請(qǐng)占用了一塊堆內(nèi)存，當(dāng)把這個(gè)對(duì)象指針置為null時(shí)或者離開(kāi)作用域?qū)е卤讳N(xiāo)毀，那么這塊內(nèi) 存沒(méi)有人引用它了在JS里面就會(huì)被自動(dòng)垃圾回收。但是如果這個(gè)對(duì)象指針沒(méi)有被置為null，且代碼面 沒(méi)辦法再獲取到這個(gè)對(duì)象指針了，就會(huì)導(dǎo)致無(wú)法釋放掉它指向的內(nèi)存，也就是說(shuō)發(fā)生了內(nèi)存泄露。 內(nèi)存泄漏（Memory Leak）是指程序中已動(dòng)態(tài)分配的堆內(nèi)存由于某種原因程序未釋放或無(wú)法釋放，造 成系統(tǒng)內(nèi)存的浪費(fèi)，導(dǎo)致程序運(yùn)行速度減慢甚至系統(tǒng)崩潰等嚴(yán)重后果。 1、echarts圖未徹底刪除； 2、setTimeout和setInterval未清除； 3、全局定于變量未清除； 4、偵聽(tīng)器未清除
場(chǎng)景分析
其中全局對(duì)象onresize，偵聽(tīng)事件應(yīng)在組價(jià)銷(xiāo)毀前清除。
重點(diǎn)：在vue中，echarts繪圖是十分消耗資源的，所以在組件銷(xiāo)毀前，一定要清除對(duì)應(yīng)的數(shù)據(jù)。
在data中定義如下：
在銷(xiāo)毀組件前，應(yīng)進(jìn)行如下操作：
vue中1
vue中2
3keep-alive
一旦你使用了 keep-alive，那么你就可以訪(fǎng)問(wèn)另外兩個(gè)生命周期鉤子：activated和 deactivated。如果你想要在一個(gè) keep-alive 組件被移除的時(shí)候進(jìn)行清理或改變數(shù)據(jù)，可以使用 deactivated 鉤子。
deactivated: function () {
// 移除任何你不想保留的數(shù)據(jù)，或者銷(xiāo)毀可能產(chǎn)生內(nèi)存泄漏的地方
}
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！
您可能感興趣的文章:
- vue中的eventBus會(huì)不會(huì)產(chǎn)生內(nèi)存泄漏你知道嗎
- Vue優(yōu)化:常見(jiàn)會(huì)導(dǎo)致內(nèi)存泄漏問(wèn)題及優(yōu)化詳解
- 解決vue自定義指令導(dǎo)致的內(nèi)存泄漏問(wèn)題
- 解決vue-cli項(xiàng)目開(kāi)發(fā)運(yùn)行時(shí)內(nèi)存暴漲卡死電腦問(wèn)題
- electron-vue開(kāi)發(fā)環(huán)境內(nèi)存泄漏問(wèn)題匯總
- vue單頁(yè)應(yīng)用的內(nèi)存泄露定位和修復(fù)問(wèn)題小結(jié)
- 解決vue內(nèi)存溢出報(bào)錯(cuò)的問(wèn)題
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)日歷小插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
vue實(shí)現(xiàn)目錄樹(shù)結(jié)構(gòu)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)目錄樹(shù)結(jié)構(gòu)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
路由導(dǎo)航守衛(wèi)提供了一些鉤子函數(shù),可以在路由導(dǎo)航過(guò)程中進(jìn)行攔截和控制,其中,beforeEach 導(dǎo)航守衛(wèi)可以在每次路由切換前被觸發(fā),本文給大家介紹Vue路由守衛(wèi)詳解,感興趣的朋友一起看看吧2023-10-10
下面小編就為大家分享一篇vue注冊(cè)組件的幾種方式總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要介紹了vue中如何將日期轉(zhuǎn)換為指定的格式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
antd?Vue實(shí)現(xiàn)Login登錄頁(yè)面布局案例詳解?附帶驗(yàn)證碼驗(yàn)證功能
這篇文章主要介紹了antd?Vue實(shí)現(xiàn)Login登錄頁(yè)面布局案例詳解附帶驗(yàn)證碼驗(yàn)證功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
Vue3+TypeScript埋點(diǎn)方面的應(yīng)用實(shí)踐
本文詳細(xì)闡述了如何在Vue3中使用TypeScript實(shí)現(xiàn)埋點(diǎn)功能,包括全局注冊(cè)$track插件、Mixin實(shí)現(xiàn)全局埋點(diǎn)等,隨著Vue3的逐漸普及,在實(shí)際工作中采用Vue3+TypeScript實(shí)現(xiàn)埋點(diǎn)將會(huì)變得越來(lái)越流行2023-08-08
這篇文章主要介紹了Vue和Bootstrap的整合思路詳解,需要的朋友可以參考下2017-06-06
vue中阻止click事件冒泡,防止觸發(fā)另一個(gè)事件的方法
下面小編就為大家分享一篇vue中阻止click事件冒泡,防止觸發(fā)另一個(gè)事件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要介紹了Vue基本指令實(shí)例圖文講解，文章將基本指令講解的很清楚，有對(duì)于指令不太懂的同學(xué)可以跟著學(xué)習(xí)研究下2021-02-02