Vue優化:常見會導致內存泄漏問題及優化


1. 監聽在window/body等事件沒有解綁
2. 綁在EventBus的事件沒有解綁
3. 模塊形成的閉包內部變量使用完后沒有置成null
4. 使用第三方庫創建,沒有調用正確的銷毀函數
5 . echarts問題: 
不要把chart實例賦值在this上。(this對象一直存在不會被回收)
析構掉生成的echarts對象。
//-dom 不存在時不畫
if (!this.$refs.barchart) {
return
}
//- 不要重復初始化
let Chart = echarts.getInstanceByDom(this.$refs.barchart)
if (!Chart) {
Chart = echarts.init(this.$refs.barchart, 'light')
}
//-釋放echarts對象
beforeDestroy () {
let dcharts = echarts.getInstanceByDom(this.$refs.barchart)
if (dcharts) {
echarts.dispose(dcharts)
}
},
6. keep-alive 的 include 里存的其實是一個 vuex 中的一個數據源(數據源保存的是路由名稱),當關閉標簽頁時,這個數據源中的一項會被移除。這之前,我們在組件里監聽到這個數據源的變化,如果此組件對應的路由(這個路由應在 mounted 的時候保存下來)已經不在數據源中了,那就應該銷毀此組件。this.$destroy("組件名,es6寫法就是class類名") 這一步在新的架構里面已經做了

7. setTimeout setInterval清理 (最好不用)可以使用nextTick代替

8. 數據量多引起的內存占用嚴重,減少數據, 簡化vue實例對象的數據量,減少內存開銷

9 . vue是單頁面,頁面路由切換后,內存未釋放

10 . 如果在mounted/created 鈎子中使用了$on,需要在beforeDestroy 中做對應解綁($off)處理

11. 如果在mounted/created 鈎子中綁定了DOM/BOM 對象中的事件,需要在beforeDestroy 中做對應解綁處理

12. 如果在mounted/created 鈎子中使用了第三方庫初始化,需要在beforeDestroy 中做對應銷毀處理

13. Vue官網講解避免內存泄露 https://cn.vuejs.org/v2/cookbook/avoiding-memory-leaks.html (我們erp沒有 Choices.js庫,所以不存在)

14 閉包導致,比如事件處理回調,導致DOM對象和腳本中對象雙向引用,這個時常見的泄漏原因

16 js實例 用完 未被清理

17 JavaScript 內存泄露 : 1.意外的全局變量 2.被遺忘的計時器或回調函數 3.脫離 DOM 的引用 4.閉包


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM