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

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

Why is the re-rendering taking so long?

How can I overcome this update delay with Vue.js?

(The solutions of paginate or lazy-load are not really solving the problem; they are avoiding 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

Svelte:

<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

CodePudding user response：

1. The reason of slowly changes

<label v-for="n in items">
    <input v-model="selected" type="checkbox" :value="n">
    {{ n }}
</label>

You use v-model selected, but selected is array and you put a whole array of 2000 values in the v-model of each of the 2000 inputs, which is a lot and that's why the browser is waiting

2. Solving

You can use in input

<label v-for="n in items">
    <input v-model="selected[n]" type="checkbox" :value="n">
    {{ n }}
</label>

and you can change selectAll function in script

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