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

2022-05-15 12:04:50 字數 975 閱讀 8896

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 ...