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

　　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鈎子函數里直接調用即可。