vue自定義指令導致的記憶體洩漏問題解決

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

看下面**：

directives: 

target =target.parentnode
}return
window
}let targetnode =getscrolleventtarget(el)
let scrolllistener = () => 
else
rollheight =targetnode.scrolltop
cb.value(rollheight, direct)
}el.unbindeventlistener= () =>targetnode.addeventlistener('scroll', scrolllistener)
},//unbind (el) //}
}    }

起初，我忘記了些注釋的unbind方法，導致出現了記憶體洩漏，給元素繫結的scroll方法，會一直存在記憶體裡。導致出的情況，就是比如我進了頁面滾動到第3頁，出去，再點乙個頁面，當滾動到第4頁時，將會請求2次，一次是上個頁面的第4頁，一次是本次頁面的第4頁，當你退出，再進乙個頁面，當滾動到第5頁時，將會請求3次（上上頁，上頁和本頁），這就是典型的事件未解綁導致的記憶體洩漏。

所以需要給元素解綁，好在vue指令提供了unbind鉤子函式，但是這裡依然有個技術巧點就是：

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

2、就是解綁的時候我們也需要找到那個父級元素等等，然後還需要remove對應的方法，那麼肯定不可能在unbind裡再寫一次，所以就可以在insert鉤子函式裡，給el繫結乙個解綁事件el.unbindeventlistener，在unbind鉤子函式裡直接呼叫即可。

vue自定義指令導致的記憶體洩漏問題解決

vue的自定義指令是乙個比較容易引起記憶體洩漏的地方，原因就在於指令通常給元素繫結了事件，但是如果忘記了解綁，就會產生記憶體洩漏的問題。看下面 directives target target.parentnode return window let targetnode getscrolleven...

Vue自定義指令

vue有很多內建的指令，比如說v on，v model，v clock等等，每乙個指令會完成一定的功能，但是這些內建的指令總會有些侷限性，要是能夠自定義指令就好了 vue的自定義指令分類 全域性指令和區域性指令 vue指令的定義和用法 以全域性指令為例 1.語法 vue.directive 指令id...

vue自定義指令

自定義指令主要有兩種方式。一是在元件裡以directives的選項來自定義指令的內容。這樣的自定義指令是區域性的自定義指令，只在當前的元件裡面才能使用。script export default directives arr arr.join el.style.csstext arr script ...