Mengapakah Vue DOM berubah dengan perlahan?
Saya mempunyai senarai 2000 kotak pilihan input. Apabila memilih kesemuanya sekali gus, terdapat kelewatan yang ketara selama kira-kira 2 saat (dan penyemak imbas membeku). Ini nampaknya berlaku dengan Vue dan React, tetapi tidak dengan Svelte, jQuery atau vanila.
Dengan lebih 5k kotak pilihan ia menjadi penyekat 3-5 saat yang sangat menjengkelkan...
Mengapa mengambil masa yang lama untuk dipaparkan semula?
Bagaimana untuk mengatasi kelewatan kemas kini ini menggunakan Vue.js?
(Penyelesaian penomboran atau pemuatan malas tidak benar-benar menyelesaikan masalah; mereka hanya mengelaknya.)
Di bawah ialah kod dalam Vue, diikuti dengan contoh yang sama dalam 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>
Pautan Vue SFC
Ramping:
<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>
Pautan REPL yang lembut
