Vuejs v-for는 무한 스크롤 시 매우 지연됩니다.

Question

새로운 객체 데이터를 추가하면 v-for가 이미 렌더링된 객체라도 모든 객체를 다시 렌더링하는 이상한 vuejs 효과가 있습니다.

페이스북처럼 무한스크롤을 구현하고 있어요.

코드

이 코드를 설명하기 위해 Firebase에서 새 데이터를 가져온 다음 화면 하단에 도달하면 데이터 개체에 푸시합니다

으아아아 으아아아

자, 문제는…

이 화면 녹화를 보세요, 집중된 마우스, 너무 느려서 vuejs가 새 데이터를 추가하고 로드하는 동안 버튼을 클릭할 수도 없습니다

내가 사용하는 코드입니다

나는 무엇을 의심하는가

새 데이터가 추가될 때마다 VueJS가 모든 데이터를 다시 렌더링하여 이러한 효과가 발생하는 것으로 의심됩니다. vueJS가 이미 화면에 렌더링된 데이터를 다시 렌더링하지 않도록 하는 방법은 무엇입니까?

Answer 1

두 개의 불필요한 비동기 IIFE가 있습니다. forEach의 두 번째 코드는 루프 반복마다 비동기 코드가 동시에 실행되어 다음과 같은 효과가 있기 때문에 특히 문제가 됩니다.

1. 는 모든 루프 반복에서 즉시 실행되며 서버에 스팸을 보낼 수도 있습니다(네트워크 요청을 수행한다고 가정). 이것이 당신의 의도입니까? 새 게시물은 최대 5개까지만 받을 수 있는 것 같으니 괜찮을 것 같습니다. getDocs()
비동기 기능은 일부 상태를 업데이트하여 Vue가 각 문서에 대해 다시 렌더링하도록 트리거합니다. Vue가 가능한 한 적게 업데이트되도록 마지막에 함께 일괄 처리해야 합니다.

도 사용하지 마세요. 죽도록 놔두세요. var；使用 const 或 let 代替。几乎没有充分的理由再使用 var

이로 인해 성능이 크게 향상될 것이라고 말할 수는 없지만 다음 변경 사항을 권장합니다(테스트되지 않음):

으아아아

템플릿에서 실행

목록이 길면 속도가 느려질 수 있나요? 각 게시물에 대해 미리 계산할 수 있나요? :post-content="truncateString(linkify(post.data().post_content))" 意味着 linkify 将在每次重新渲染期间执行。我怀疑 linkify

구성 요소가 설치되면 창 스크롤 이벤트 리스너가 등록됩니다. 구성 요소가 삭제되면 이벤트 리스너 등록을 취소해야 합니다. 그렇지 않으면 창이 스크롤될 때마다 계속 실행됩니다. 이는 귀하의 경우에는 문제가 되지 않을 수 있지만 재사용 가능한 구성 요소의 경우에는 필요합니다.