詳解Vue如何避免內(nèi)存泄漏
1.前言
使用Vue開發(fā)應(yīng)用時(shí),需要注意內(nèi)存泄漏的問題,因?yàn)閂ue所采用的是SPA設(shè)計(jì),用戶使用時(shí)是不需要刷新瀏覽器的,所以需要js來清理組件確保垃圾回收避免內(nèi)存泄漏。
內(nèi)存泄漏在Vue應(yīng)用中通常不是來自于其本身,更多的是發(fā)生在把其它的庫或者組件集成到該應(yīng)用中時(shí)。
2.案例
這個(gè)案例展示一個(gè)由于在vue組件中使用Choices.js庫而沒有及時(shí)用完清除導(dǎo)致內(nèi)存泄漏問題。
示例中:加載了一個(gè)帶有非常多的選擇項(xiàng)的選擇框,然后用到了以惡搞顯示/隱藏按鈕,通過一個(gè)v-if 的指令讓其從DOM中移除父級元素,但是并沒有清除Choices.js新添加的DOM片段,從而導(dǎo)致內(nèi)存泄漏。
<link rel="stylesheet prefetch" rel="external nofollow" > <script src="https://joshuajohnson.co.uk/Choices/assets/scripts/dist/choices.min.js?version=3.0.3"></script> <div id="app"> <button v-if="showChoices" @click="hide" >Hide</button> <button v-if="!showChoices" @click="show" >Show</button> <div v-if="showChoices"> <select id="choices-single-default"></select> </div> </div>
new Vue({ el: "#app", data: function () { return { showChoices: true } }, mounted: function () { this.initializeChoices() }, methods: { initializeChoices: function () { let list = [] // 我們來為選擇框載入很多選項(xiàng) // 這樣的話它會(huì)占用大量的內(nèi)存 for (let i = 0; i < 1000; i++) { list.push({ label: "Item " + i, value: i }) } new Choices("#choices-single-default", { searchEnabled: true, removeItemButton: true, choices: list }) }, show: function () { this.showChoices = true this.$nextTick(() => { this.initializeChoices() }) }, hide: function () { this.showChoices = false } } })
根據(jù)上述示例,在頁面中操作點(diǎn)擊 顯示/隱藏按鈕50次左右,則會(huì)在瀏覽器任務(wù)管理器中發(fā)現(xiàn)內(nèi)存的使用在增加并且從未被回收。
3.解決內(nèi)存泄漏問題
在上述示例中,可以使用 hide() 方法在將選擇框從DOM中移除之前做一些清理工作,來解決內(nèi)存泄漏問題。在Vue實(shí)例的數(shù)據(jù)對象中保留一個(gè)屬性,并會(huì)使用ChoicesAPI中的 destroy() 方法將其清除。
new Vue({ el: "#app", data: function () { return { showChoices: true, choicesSelect: null } }, mounted: function () { this.initializeChoices() }, methods: { initializeChoices: function () { let list = [] for (let i = 0; i < 1000; i++) { list.push({ label: "Item " + i, value: i }) } // 在我們的 Vue 實(shí)例的數(shù)據(jù)對象中設(shè)置一個(gè) `choicesSelect` 的引用 this.choicesSelect = new Choices("#choices-single-default", { searchEnabled: true, removeItemButton: true, choices: list }) }, show: function () { this.showChoices = true this.$nextTick(() => { this.initializeChoices() }) }, hide: function () { // 現(xiàn)在我們可以讓 Choices 使用這個(gè)引用 // 在從 DOM 中移除這些元素之前進(jìn)行清理工作 this.choicesSelect.destroy() this.showChoices = false } } })
4.這樣做的目的
內(nèi)存管理和性能測試在快速交付的時(shí)候很容易被忽視,所以盡量保持小內(nèi)存開銷會(huì)讓用戶體驗(yàn)感覺更好。
考慮到不同用戶是用的設(shè)備類型以及使用方式不同,他們使用的是內(nèi)存有限的電腦設(shè)備或者移動(dòng)設(shè)備嗎?或者用戶會(huì)做很多應(yīng)用內(nèi)的導(dǎo)航嗎?如果是其中之一的話,保持一個(gè)良好的內(nèi)存管理實(shí)踐會(huì)避免糟糕的瀏覽器卡頓崩潰的場景,也避免了在持續(xù)使用中存在潛在的性能惡化問題。
5.實(shí)際例子
更常見的實(shí)際場景使用 Vue Router 在一個(gè)單頁面應(yīng)用中路由導(dǎo)航到不同的組件。
就像 v-if 指令一樣,當(dāng)一個(gè)用戶在應(yīng)用中導(dǎo)航時(shí),Vue Router 從虛擬DOM中移除了該元素,并替換為新的元素。Vue 的 beforeDestroy() 鉤子函數(shù)是一個(gè)解決Vue Router 的應(yīng)用中的這類問題的好地方。
可以將要清理內(nèi)存的工作放在 beforeDestroy() 中處理:
beforeDestroy: function(){ this.choicesSelect.destroy() }
6.替代方案
另一個(gè)場景:如果打算在內(nèi)存中保留狀態(tài)和該元素,則可以采用內(nèi)置的keep-alive組件。
使用 keep-alive 包裹一個(gè)組件后,它的狀態(tài)則會(huì)保留,也就保留在內(nèi)存中。
<button @click="show = false">Hide</button> <keep-alive> <!-- `<my-component>` 即便被刪除仍會(huì)刻意保留在內(nèi)存里 --> <my-component v-if="show"></my-component> </keep-alive>
這個(gè)技巧可以用來提升用戶體驗(yàn),例如:用戶在一個(gè)表單中輸入了一些信息,突然因?yàn)橛衅渌虑橐M(jìn)入另一個(gè)導(dǎo)航頁面,如果用戶再次回到該頁面,那這些之前用戶輸入的表單信息應(yīng)該保留著。
一旦使用 keep-alive 就可以調(diào)用到另外兩個(gè)生命周期鉤子:activated 和 deactivated。如果想要在一個(gè)keep-alive組件被移除時(shí)候進(jìn)行清理或改變數(shù)據(jù),可以使用 deactivated 鉤子
deactivated: function () { // 移除任何你不想保留的數(shù)據(jù) }
7.總結(jié)
Vue 讓開發(fā)響應(yīng)式應(yīng)用程序變得特別容易,但是仍然要警惕內(nèi)存泄漏問題,這些內(nèi)存泄露問題會(huì)發(fā)生在使用Vue之外的其他DOM操作的三方庫時(shí),請確保在不使用的情況下及時(shí)清理,保證用戶的更好體驗(yàn)
到此這篇關(guān)于詳解Vue如何避免內(nèi)存泄漏的文章就介紹到這了,更多相關(guān)Vue 避免內(nèi)存泄漏內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 一文詳解Vue中內(nèi)存泄漏的場景與預(yù)防技巧
- Vue內(nèi)存泄漏的識別和解決方案
- 在Vue開發(fā)過程中解決和預(yù)防內(nèi)存泄漏問題的方法詳解
- Vue實(shí)現(xiàn)定位并解決內(nèi)存泄漏
- 解決vue3中內(nèi)存泄漏的問題
- 解決Vue使用百度地圖BMapGL內(nèi)存泄漏問題?Out?of?Memory
- vue中的eventBus會(huì)不會(huì)產(chǎn)生內(nèi)存泄漏你知道嗎
- Vue優(yōu)化:常見會(huì)導(dǎo)致內(nèi)存泄漏問題及優(yōu)化詳解
- 解決vue自定義指令導(dǎo)致的內(nèi)存泄漏問題
相關(guān)文章
vue移動(dòng)端項(xiàng)目渲染pdf步驟及問題小結(jié)
這篇文章主要介紹了vue移動(dòng)端項(xiàng)目渲染pdf步驟,vue-pdf的插件在使用的過程中是連連踩坑的,基本遇到3個(gè)問題,分別在文中給大家詳細(xì)介紹,需要的朋友可以參考下2022-08-08Vue實(shí)用功能之實(shí)現(xiàn)拖拽元素、列表拖拽排序
在日常開發(fā)中,特別是管理端,經(jīng)常會(huì)遇到要實(shí)現(xiàn)拖拽排序的效果,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)用功能之實(shí)現(xiàn)拖拽元素、列表拖拽排序的相關(guān)資料,需要的朋友可以參考下2022-10-10vue項(xiàng)目調(diào)試的三種方法總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于vue項(xiàng)目調(diào)試的三種方法,大家可以根據(jù)需要選擇調(diào)試方法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09Vue3?Transition組件給頁面切換并加上動(dòng)畫效果
這篇文章主要給大家介紹了關(guān)于Vue3?Transition組件給頁面切換并加上動(dòng)畫效果的相關(guān)資料,vue的過渡動(dòng)畫主要是transition標(biāo)簽的使用,配合css動(dòng)畫實(shí)現(xiàn)的,需要的朋友可以參考下2023-06-06Vue3?路由頁面切換動(dòng)畫?animate.css效果
這篇文章主要介紹了Vue3路由頁面切換動(dòng)畫animate.css效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09