아무리 찾아도답이안나와서 질문드립니다.

Question

https://codepen.io/mikilll94/pen/RwbYrpz 간단한 예제인데요. 데이터가 많을때 v-model 바인딩을 하면 속도가 엄청느려지는데 이유가 뭔가요 v-model 동작방식과 관련이 있을까요??..  그리고 해결방안이 있을까요

이윤기 · Answer

이건 Vue의 문제가 아니라 html의 한계 같은데요? virtual-scroll 같은 거 찾아보세요.  제가 옛날에 봤을 땐 테이블에 2천건 정도만 해도 브라우저 죽었어요. 가상스크롤 같은 걸로 가려야 숨겼다 보였다 하면서 죽지 않고 보여줘요.

캡틴판교 · Answer

안녕하세요 남우님 좋은 질문입니다. 이렇게 실제 예시까지 주시는 경우는 드문데 잘 봤습니다 :) 일단 주신 예제에서의 문제점은 Vue.js의 특정 문제라기 보다 한번에 너무 많은 데이터를 렌더링하려고 해서 문제입니다. 레이지 로딩(lazy loading)에 대해서 한번 확인해보시면 좋을 것 같고 사용자가 보는 뷰포트 기준으로만 데이터를 뿌리시면 크게 문제가 되지는 않을 것 같아요 :) 윤기님도 답변 감사드립니다! :)