Vue優(yōu)化:常見會導(dǎo)致內(nèi)存泄漏問題及優(yōu)化詳解-創(chuàng)新互聯(lián)

如果你在用 Vue 開發(fā)應(yīng)用，那么就要當(dāng)心內(nèi)存泄漏的問題。這個問題在單頁應(yīng)用 (SPA) 中尤為重要，因為在 SPA 的設(shè)計中，用戶使用它時是不需要刷新瀏覽器的，所以 JavaScript 應(yīng)用需要自行清理組件來確保垃圾回收以預(yù)期的方式生效。因此在vue開發(fā)過程中，你需要時刻警惕內(nèi)存泄漏的問題，這些內(nèi)存泄漏往往會發(fā)生在使用 Vue 之外的其它進(jìn)行 DOM 操作的三方庫時，請確保測試應(yīng)用的內(nèi)存泄漏問題并在適當(dāng)?shù)臅r機(jī)做必要的組件清理。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、重慶小程序開發(fā)公司、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了宜賓免費建站歡迎大家使用！

下面是我開發(fā)過程中遇到，并查資料總結(jié)的內(nèi)存泄漏問題，會持續(xù)更新中

一、vue自定義指令給元素綁定事件，卻沒有解綁事件

這個問題見上篇博客，vue自定義指令導(dǎo)致的內(nèi)存泄漏問題解決

二、v-if指令產(chǎn)生的內(nèi)存泄露

v-if也是一個容易產(chǎn)生內(nèi)存泄漏的地方。因為：

1、v-if綁定到false的值，但是實際上dom元素在隱藏的時候沒有被真實的釋放掉

2、就是非常常見的比如我們通過v-if刪除了父級元素，但是并沒有移除父級元素里的dom片段。通常產(chǎn)生于使用第三方庫的時候，比如下面的示例中，我們加載了一個帶有非常多選項的選擇框，然后我們用到了一個顯示/隱藏按鈕，通過一個 v-if 指令從虛擬 DOM 中添加或移除它。這個示例的問題在于這個 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>

本文名稱：Vue優(yōu)化:常見會導(dǎo)致內(nèi)存泄漏問題及優(yōu)化詳解-創(chuàng)新互聯(lián)
文章位置：http://bm7419.com/article22/diohcc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、網(wǎng)站設(shè)計、靜態(tài)網(wǎng)站、服務(wù)器托管、網(wǎng)站策劃、移動網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)