Mengapakah Vue DOM berubah dengan perlahan?

Question

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

Answer 1

1. Sebab lambat berubah

    
    {{ n }}

Anda menggunakan model v yang dipilih, tetapi yang dipilih ialah tatasusunan, dan anda meletakkan keseluruhan tatasusunan 2000 nilai ke dalam setiap model v input 2000, iaitu banyak, itulah sebabnya penyemak imbas menunggu

2. Selesaikan

Anda boleh gunakan dalam input

    
    {{ n }}

Dan anda boleh menukar fungsi selectAll dalam skrip anda

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