Vue DOM은 왜 그렇게 느리게 변경되나요?

Question

2000개의 입력 체크박스 목록이 있습니다. 한 번에 모두 선택하면 눈에 띄게 약 2초 정도 지연이 발생합니다(브라우저가 정지됨). 이는 Vue 및 React의 경우인 것 같지만 Svelte, jQuery 또는 바닐라에서는 그렇지 않습니다.

5,000개 이상의 체크박스를 사용하면 매우 짜증나는 3~5초 차단기가 됩니다...

다시 렌더링하는 데 왜 이렇게 오래 걸리나요?

Vue.js를 사용하여 이 업데이트 지연을 어떻게 극복할 수 있나요?

(페이지 매김 또는 지연 로딩 솔루션은 문제를 실제로 해결하지 못하고 문제를 피할 뿐입니다.)

아래는 Vue의 코드이고 Svelte의 동일한 예가 이어집니다.

으아아아

Vue SFC 링크

슬림:

으아아아

Svelte REPL 링크

Answer 1

<强>1. 변화가 느린 이유

으아아아

선택한 v-model을 사용하는데 선택한 것이 배열이고, 2000개 값의 전체 배열을 각 2000개의 입력 v-model에 넣기 때문에 너무 많아서 브라우저가 기다립니다

<强>2. 해결

입력에 사용할 수 있습니다

으아아아

그리고 스크립트에서 selectAll 기능을 변경할 수도 있습니다

으아아아