Pourquoi Vue DOM change-t-il si lentement ?

Question

J'ai une liste de 2000 cases à cocher. Lorsque vous les sélectionnez tous en même temps, il y a un délai notable d'environ 2 secondes (et le navigateur se bloque). Cela semble être le cas avec Vue et React, mais pas avec Svelte, jQuery ou vanilla.

Avec plus de 5 000 cases à cocher, cela devient un bloqueur très ennuyeux de 3 à 5 secondes...

Pourquoi le nouveau rendu prend-il autant de temps ?

Comment surmonter ce retard de mise à jour avec Vue.js ?

(Les solutions de pagination ou de chargement paresseux ne résolvent pas vraiment le problème ; elles l'évitent simplement.)

Ci-dessous le code dans Vue, suivi du même exemple dans Svelte.

<script setup>
import { ref } from 'vue'
const items = ref(Array.from({length: 2000}, (v, k) => k));
let selected = ref([]);
function selectAll() {
  selected.value = items.value.map(i => i);
}
</script>

<template>
    <button @click="selectAll">
    Select all
  </button>
  <button @click="selected = []">
    Select none
  </button>
  <label v-for="n in items">
    <input v-model="selected" type="checkbox" :value="n">
    {{ n }}
  </label>
</template>

<style>
  label {
    display: block;
    }
</style>

Lien Vue SFC

Mince :

<script>
    let items = Array.from({length: 2000}, (v, k) => k);
    let selected = [];
    function selectAll() {
        selected = items.map(i => i);
    }
</script>

<button on:click={selectAll}>
    Select all
</button>
<button on:click="{() => selected = []}">
    Select none
</button>
{#each items as n, i}
<label>
    <input type=checkbox bind:group={selected} value={n}>
    {n}
</label>
{/each}

<style>
  label {
    display: block;
    }
</style>

Lien REPL Svelte

Answer 1

<强>1. La raison du lent changement

    
    {{ n }}

Vous utilisez un modèle v sélectionné, mais celui sélectionné est un tableau, et vous mettez l'ensemble du tableau de 2000 valeurs dans chaque modèle v de 2000 entrées, ce qui est beaucoup, c'est pourquoi le navigateur attend

<强>2. Résoudre

Vous pouvez utiliser en entrée

    
    {{ n }}

Et vous pouvez modifier la fonction selectAll dans votre script

function selectAll() {
    selected = items.map(i => true);
}