為什麼Vue DOM變化的速度這麼慢？
我有一個包含 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 連結
