Why does Vue DOM change so slowly?

Question

I have a list with 2000 input checkboxes. When selecting them all at once, there is a noticeable delay of about 2 seconds (and the browser freezes). This seems to be the case with Vue and React, but not with Svelte, jQuery or vanilla.

With over 5k checkboxes it becomes a very annoying 3-5 second blocker...

Why does it take so long to re-render?

How to overcome this update delay using Vue.js?

(Pagination or lazy loading solutions don’t really solve the problem; they just avoid it.)

Below is the code in Vue, followed by the same example 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

slim:

<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. The reason for the slow change

    
    {{ n }}

You use a selected v-model, but the selected is an array, and you put the entire array of 2000 values ​​into each 2000 input v-model, which is a lot, and this is what the browser is waiting for s reason

2. solve

You can use

in your input

    
    {{ n }}

And you can change the selectAll function in your script

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