Vue優(yōu)化:常見會(huì)導(dǎo)致內(nèi)存泄漏問題及優(yōu)化詳解

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

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

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

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

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

v-if也是一個(gè)容易產(chǎn)生內(nèi)存泄漏的地方。因?yàn)椋?/p>

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

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

解決實(shí)例：在上述的示例中，我們可以用 hide() 方法在將選擇框從 DOM 中移除之前做一些清理工作，來解決內(nèi)存泄露問題。為了做到這一點(diǎn)，我們會(huì)在 Vue 實(shí)例的數(shù)據(jù)對(duì)象中保留一個(gè)屬性，并會(huì)使用 Choices API 中的 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ù)對(duì)象中設(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
 }
 }
})

三、vue-router跳轉(zhuǎn)到別的組件導(dǎo)致的內(nèi)容泄漏

在上述示例中，我們使用了一個(gè) v-if 指令產(chǎn)生內(nèi)存泄漏，但是一個(gè)更常見的實(shí)際的場(chǎng)景是使用 Vue Router 在一個(gè)單頁應(yīng)用中路由到不同的組件。

就像這個(gè) v-if 指令一樣，當(dāng)一個(gè)用戶在你的應(yīng)用中導(dǎo)航時(shí)，Vue Router 從虛擬 DOM 中移除了元素，并替換為了新的元素。但是其子元素dom片段也并沒有銷毀。

Vue 的 beforeDestroy() 生命周期鉤子是一個(gè)解決基于 Vue Router 的應(yīng)用中的這類問題的好方法。我們可以將清理工作放入 beforeDestroy() 鉤子，像這樣：

beforeDestroy: function () {
 this.choicesSelect.destroy()
}
　　

所以最正確的解決方案就是：首先，v-if置為false前先刪除創(chuàng)建的dom片段；其次，路由跳出吃，在beforeDestroy鉤子函數(shù)里面判斷choicesSelect是否銷毀，沒銷毀則銷毀。

還有一個(gè)替代方案：

我們已經(jīng)討論了移除元素時(shí)的內(nèi)存管理，但是如果你打算在內(nèi)存中保留狀態(tài)和元素該怎么做呢？這種情況下，你可以使用內(nèi)建的 keep-alive 組件。

當(dāng)你用 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)。例如，設(shè)想一個(gè)用戶在一個(gè)文本框中輸入了評(píng)論，之后決定導(dǎo)航離開。如果這個(gè)用戶之后導(dǎo)航回來，那些評(píng)論應(yīng)該還保留著。

一旦你使用了 keep-alive，那么你就可以訪問另外兩個(gè)生命周期鉤子：activated和 deactivated。如果你想要在一個(gè) keep-alive 組件被移除的時(shí)候進(jìn)行清理或改變數(shù)據(jù)，可以使用 deactivated 鉤子。

deactivated: function () {
 // 移除任何你不想保留的數(shù)據(jù)，或者銷毀可能產(chǎn)生內(nèi)存泄漏的地方
}

以上這篇Vue優(yōu)化:常見會(huì)導(dǎo)致內(nèi)存泄漏問題及優(yōu)化詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。