Dom*_*rov 6 javascript reactjs vue.js svelte vuejs3
我有一个包含 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>
Run Code Online (Sandbox Code Playgroud)
苗条:
<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>
Run Code Online (Sandbox Code Playgroud)
1、缓慢变化的原因
<label v-for="n in items">
<input v-model="selected" type="checkbox" :value="n">
{{ n }}
</label>
Run Code Online (Sandbox Code Playgroud)
您使用 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>
Run Code Online (Sandbox Code Playgroud)
您可以更改脚本中的 selectAll 函数
function selectAll() {
selected = items.map(i => true);
}
Run Code Online (Sandbox Code Playgroud)