Tengo una lista de 2000 casillas de verificación de entrada. Al seleccionarlos todos a la vez, hay un retraso notable (y el bloqueo del navegador) de aproximadamente 2 segundos. Este parece ser el caso de Vue y React, pero no de Svelte, jQuery o vanilla.
Con más de 5k casillas de verificación, se convierte en un bloqueador de 3-5 segundos muy molesto...
¿Por qué tarda tanto el renderizado?
¿Cómo puedo superar este retraso de actualización con Vue.js?
(Las soluciones de paginación o carga diferida en realidad no resuelven el problema; lo están evitando).
A continuación se muestra el código en Vue seguido del mismo ejemplo en 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>Esbelto:
<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>1. La razón de los cambios lentos
<label v-for="n in items"> <input v-model="selected" type="checkbox" :value="n"> {{ n }} </label>Utiliza el modelo v seleccionado, pero seleccionado es una matriz y coloca una matriz completa de 2000 valores en el modelo v de cada una de las 2000 entradas, que es mucho y es por eso que el navegador está esperando
2. Resolver
Puedes usar en la entrada
<label v-for="n in items"> <input v-model="selected[n]" type="checkbox" :value="n"> {{ n }} </label>y puede cambiar la función selectAll en el script
function selectAll() { selected = items.map(i => true); }