vue 사용자 정의 명령으로 인한 메모리 유출 문제 해결

2169 단어 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페이지로 스크롤할 때 두 번, 한 번은 지난 페이지의 4페이지, 한 번은 이번 페이지의 4페이지, 당신이 퇴장하고 다시 한 페이지, 5페이지로 스크롤할 때 세 번(지난 페이지, 위 페이지와 이 페이지)을 요청하는 것이 전형적인 사건 미해결로 인한 메모리 유출이다.
그래서 원소의 묶음을 풀어줘야 합니다. vue 명령에 unbind 갈고리 함수를 제공하면,
하지만 여기에는 여전히 기술적인 묘점이 있다.
1. 우리 scroll의 원소는 귀속된 원소의 상위 등급일 수 있습니다. 한 층 한 층 위로 찾아야 합니다.
2. 묶음을 풀 때 우리도 그 부급 원소를 찾아야 한다. 그리고remove에 대응하는 방법이 필요하다. 그러면 unbind에서 다시 한 번 쓸 수 없기 때문에 insert 갈고리 함수에서el에게 묶음 해제 사건el을 묶을 수 있다.unbindEventListener, unbind 갈고리 함수에서 직접 호출하면 됩니다.
이상의 vue 사용자 정의 지령으로 인한 메모리 유출 문제를 해결하는 것은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.
메모리 접근 안전
[Level2] 소수 찾기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage