入力チェックボックスが 2000 個あるリストがあります。すべてを一度に選択すると、約 2 秒の顕著な遅延が発生します (ブラウザがフリーズします)。これは Vue と React に当てはまるようですが、Svelte、jQuery、または Vanilla には当てはまりません。
5,000 を超えるチェックボックスがあると、非常に煩わしい 3 ～ 5 秒のブロッカーになります...
なぜ再レンダリングにこれほど時間がかかるのでしょうか?
Vue.js を使用してこの更新の遅延を克服するにはどうすればよいですか?
(ページネーションや遅延読み込みソリューションは実際には問題を解決しません。単に問題を回避するだけです。)
以下は Vue のコードであり、その後に Svelte での同じ例が続きます。
リーリーVue SFC リンク
＃＃＃スリム：＃＃＃ リーリーSvelte REPL リンク
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
1.変化が遅い理由
リーリー選択した v モデルを使用しますが、選択したものは配列であり、2000 個の値の配列全体を 2000 個の入力 v モデルのそれぞれに入力します。これは大量であり、これがブラウザーが待機しているものです。という理由で
2.解決する＃＃＃＃＃＃ 入力には
を使用できます リーリーそして、スクリプト内の selectAll 関数を変更できます
リーリー