解決vue自定義指令導(dǎo)致的內(nèi)存泄漏問題
更新時間：2020年08月04日 11:51:08 作者：古蘭精
這篇文章主要介紹了解決vue自定義指令導(dǎo)致的內(nèi)存泄漏問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
vue的自定義指令是一個比較容易引起內(nèi)存泄漏的地方，原因就在于指令通常給元素綁定了事件，但是如果忘記了解綁，就會產(chǎn)生內(nèi)存泄漏的問題。
看下面代碼：
directives: {
scroll: {
inserted (el, cb) {
// 不是元素節(jié)點 || 未設(shè)置回調(diào)函數(shù)
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方法，導(dǎo)致出現(xiàn)了內(nèi)存泄漏，給元素綁定的scroll方法，會一直存在內(nèi)存里。
導(dǎo)致出的情況，就是比如我進(jìn)了頁面滾動到第3頁，出去，再點一個頁面，當(dāng)滾動到第4頁時，將會請求2次，一次是上個頁面的第4頁，一次是本次頁面的第4頁，當(dāng)你退出，再進(jìn)一個頁面，當(dāng)滾動到第5頁時，將會請求3次（上上頁，上頁和本頁），這就是典型的事件未解綁導(dǎo)致的內(nèi)存泄漏。
所以需要給元素解綁，好在vue指令提供了unbind鉤子函數(shù)，
但是這里依然有個技術(shù)巧點就是：
1、我們scroll的元素可能是綁定的元素的父級等等，需要一層一層往上找
2、就是解綁的時候我們也需要找到那個父級元素等等，然后還需要remove對應(yīng)的方法，那么肯定不可能在unbind里再寫一次，所以就可以在insert鉤子函數(shù)里，給el綁定一個解綁事件el.unbindEventListener，在unbind鉤子函數(shù)里直接調(diào)用即可。
以上這篇解決vue自定義指令導(dǎo)致的內(nèi)存泄漏問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
mixins（混入）是一種分發(fā)?Vue?組件中可復(fù)用功能的非常靈活的方式，這篇文章主要為大家介紹了mixins混入的介紹和使用，需要的可以參考下2023-08-08
這篇文章主要給大家介紹了關(guān)于vue中路由參數(shù)傳遞遇到的坑的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
這篇文章主要為大家詳細(xì)介紹了vue基于better-scroll仿京東分類列表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
因為本人使用的是webstorm2016 2.3版本，結(jié)果竟然不支持vue文件，所以找到了一個解決方法，下面這篇文章主要給大家介紹了關(guān)于webstorm添加vue支持的方法教程，需要的朋友可以參考借鑒，下面來一起看看吧。2017-07-07
vue中前端如何實現(xiàn)pdf預(yù)覽功能(含vue-pdf插件用法)
這篇文章主要給大家介紹了vue中前端如何實現(xiàn)pdf預(yù)覽功能的相關(guān)資料,文中包含vue-pdf插件用法,在前端開發(fā)中,很多時候我們需要進(jìn)行pdf文件的預(yù)覽操作,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue中子組件修改父組件數(shù)據(jù)的相關(guān)資料，文中介紹了vue中watch的認(rèn)識，關(guān)于子組件修改父組件屬性認(rèn)識，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
這篇文章主要介紹了Vue中如何使用base64編碼和解碼問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
今天小編就為大家分享一篇關(guān)于在vue項目中引入highcharts圖表的方法，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要為大家介紹了手寫一個vite插件教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
Vue2.x如何解決Element組件el-tooltip滾動時錯位不消失的問題
這篇文章主要介紹了Vue2.x如何解決Element組件el-tooltip滾動時錯位不消失的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06