為什麼Vue DOM變化的速度這麼慢？

Question

我有一個包含 2000 個輸入複選框的清單。當一次選擇它們時，會出現大約 2 秒的明顯延遲（並且瀏覽器凍結）。 Vue 和 React 似乎是這種情況，但 Svelte、jQuery 或 vanilla 則不然。

有了超過 5k 個複選框，它就會變成一個非常煩人的 3-5 秒攔截器...

為什麼重新渲染需要這麼長時間？

如何使用 Vue.js 克服此更新延遲？

（分頁或延遲載入的解決方案並沒有真正解決問題；他們只是在避免問題。）

下面是 Vue 中的程式碼，後面是 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 連結

苗條：

<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 連結

Answer 1

1。慢慢改變的原因

    
    {{ n }}

您使用選定的v-model，但選定的是數組，並且您將2000 個值的整個數組放入每個2000 個輸入的v-model 中，這是很多，這就是瀏覽器等待的原因

2。解決

您可以在輸入中使用

    
    {{ n }}

並且您可以更改腳本中的 selectAll 函數

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