溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了如何解決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鉤子函數里直接調用即可。
看完上述內容，是不是對如何解決vue自定義指令導致的內存泄漏問題有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
