为什么 Vue DOM 变化这么慢？

Question

我有一个包含 2000 个输入复选框的列表。当一次全部选择它们时，会有大约 2 秒的明显延迟（和浏览器冻结）。这似乎适用于 Vue 和 React，但不适用于 Svelte 或 jQuery 或 vanilla。

有了 5k+ 个复选框，它变成了一个非常烦人的 3-5 秒拦截器...

为什么重新渲染需要这么长时间？

如何克服 Vue.js 的更新延迟？

（paginate 或 lazy-load 的解决方案并没有真正解决问题；他们正在避免它。）

下面是 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 link

苗条：

<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 link

Answer 1

1.慢慢改的原因

<label v-for="n in items">
    <input v-model="selected" type="checkbox" :value="n">
    {{ n }}
</label>

您使用 v-model selected，但 selected 是数组，您将整个 2000 个值的数组放在 2000 个输入的每个 v-model 中，这很多，这就是浏览器的原因正在等待

2。求解

您可以在输入中使用

<label v-for="n in items">
    <input v-model="selected[n]" type="checkbox" :value="n">
    {{ n }}
</label>

并且您可以在脚本中更改 selectAll 函数

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

为什么 Vue DOM 变化这么慢？

Why are Vue DOM changes so slow?

javascript

reactjs

vue.js

svelte

vuejs3