Warum verändert sich Vue DOM so langsam?

Question

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

Answer 1

<强>1。慢慢改变的原因

    
    {{ n }}

您使用选定的 v-model，但选定的是数组，并且您将 2000 个值的整个数组放入每个 2000 个输入的 v-model 中，这是很多，这就是浏览器等待的原因

<强>2。解决

您可以在输入中使用

    
    {{ n }}

并且您可以更改脚本中的 selectAll 函数

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