解決vue自定義指令導致的內存泄漏問題

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

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

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

看下面代碼：

directives: {
  scroll: {
  inserted (el, cb) {
   // 不是元素節(jié)點 || 未設置回調函數
   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方法，導致出現了內存泄漏，給元素綁定的scroll方法，會一直存在內存里。

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

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

但是這里依然有個技術巧點就是：

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

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

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

您可能感興趣的文章: