快捷導(dǎo)航

解決vue自定義指令導(dǎo)致的內(nèi)存泄漏問題

更新時間：2020年08月04日 11:51:08 作者：古蘭精

這篇文章主要介紹了解決vue自定義指令導(dǎo)致的內(nèi)存泄漏問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

vue的自定義指令是一個比較容易引起內(nèi)存泄漏的地方，原因就在于指令通常給元素綁定了事件，但是如果忘記了解綁，就會產(chǎn)生內(nèi)存泄漏的問題。

看下面代碼：

directives: {
  scroll: {
  inserted (el, cb) {
   // 不是元素節(jié)點(diǎn) || 未設(shè)置回調(diào)函數(shù)
   if (el.nodeType !== 1 || !cb) return
   let direct = 'down'
   let rollHeight = 0

   let getScrollEventTarget = (target) => {
   while (target.nodeType === 1 && target.tagName !== 'BODY' && el.tagName !== 'HTML') {
    var overflowY = getComputedStyle(target).overflowY
    if (overflowY === 'scroll' || overflowY === 'auto') {
    return target
    }
    target = target.parentNode
   }
   return window
   }

   let targetNode = getScrollEventTarget(el)

   let scrollListener = () => {
   if (targetNode.scrollTop > rollHeight) {
    direct = 'down'
   } else {
    direct = 'up'
   }
   rollHeight = targetNode.scrollTop
   cb.value(rollHeight, direct)
   }

   el.unbindEventListener = () => {
   targetNode.removeEventListener('scroll', scrollListener)
   }
   targetNode.addEventListener('scroll', scrollListener)
  },
   // unbind (el) {
   // if (el.unbindEventListener) {
   // el.unbindEventListener()
   // }
  // }
  }
 }

起初，我忘記了些注釋的unbind方法，導(dǎo)致出現(xiàn)了內(nèi)存泄漏，給元素綁定的scroll方法，會一直存在內(nèi)存里。

導(dǎo)致出的情況，就是比如我進(jìn)了頁面滾動到第3頁，出去，再點(diǎn)一個頁面，當(dāng)滾動到第4頁時，將會請求2次，一次是上個頁面的第4頁，一次是本次頁面的第4頁，當(dāng)你退出，再進(jìn)一個頁面，當(dāng)滾動到第5頁時，將會請求3次（上上頁，上頁和本頁），這就是典型的事件未解綁導(dǎo)致的內(nèi)存泄漏。

所以需要給元素解綁，好在vue指令提供了unbind鉤子函數(shù)，

但是這里依然有個技術(shù)巧點(diǎn)就是：

1、我們scroll的元素可能是綁定的元素的父級等等，需要一層一層往上找

2、就是解綁的時候我們也需要找到那個父級元素等等，然后還需要remove對應(yīng)的方法，那么肯定不可能在unbind里再寫一次，所以就可以在insert鉤子函數(shù)里，給el綁定一個解綁事件el.unbindEventListener，在unbind鉤子函數(shù)里直接調(diào)用即可。

以上這篇解決vue自定義指令導(dǎo)致的內(nèi)存泄漏問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: