Vue DOM の変更がこれほど遅いのはなぜですか?

Question

入力チェックボックスが 2000 個あるリストがあります。すべてを一度に選択すると、約 2 秒の顕著な遅延が発生します (ブラウザがフリーズします)。これは Vue と React に当てはまるようですが、Svelte、jQuery、または Vanilla には当てはまりません。

5,000 を超えるチェックボックスがあると、非常に煩わしい 3 ～ 5 秒のブロッカーになります...

なぜ再レンダリングにこれほど時間がかかるのでしょうか?

Vue.js を使用してこの更新の遅延を克服するにはどうすればよいですか?

(ページネーションや遅延読み込みソリューションは実際には問題を解決しません。単に問題を回避するだけです。)

以下は Vue のコードであり、その後に Svelte での同じ例が続きます。

リーリー

Vue SFC リンク

＃＃＃スリム：＃＃＃ リーリー

Svelte REPL リンク

Answer 1

1.変化が遅い理由

リーリー

選択した v モデルを使用しますが、選択したものは配列であり、2000 個の値の配列全体を 2000 個の入力 v モデルのそれぞれに入力します。これは大量であり、これがブラウザーが待機しているものです。という理由で

2.解決する＃＃＃＃＃＃ 入力には

を使用できます リーリー

そして、スクリプト内の selectAll 関数を変更できます

リーリー