Warum verändert sich Vue DOM so langsam?
Ich habe eine Liste mit 2000 Eingabe-Kontrollkästchen. Bei der gleichzeitigen Auswahl kommt es zu einer merklichen Verzögerung von ca. 2 Sekunden (und der Browser friert ein). Dies scheint bei Vue und React der Fall zu sein, nicht jedoch bei Svelte, jQuery oder Vanilla.
Bei über 5.000 Kontrollkästchen wird es zu einem sehr nervigen 3-5-Sekunden-Blocker...
Warum dauert das erneute Rendern so lange?
Wie kann diese Update-Verzögerung mit Vue.js überwunden werden?
(Paginierung oder Lazy-Loading-Lösungen lösen das Problem nicht wirklich; sie vermeiden es nur.)
Unten ist der Code in Vue, gefolgt vom gleichen Beispiel in 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>
Vue SFC-Link
Schlank:
<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>
Svelte REPL-Link
