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

看下面程式碼：

directives: {
  scroll: {
  inserted (el,cb) {
   // 不是元素節點 || 未設定回撥函式
   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自定義指令導致的記憶體洩漏問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。