vue页面有大量input框导致页面卡顿、输入、选择卡顿

文章讨论了在Vue应用中,大量使用el-table中的input框会导致性能问题。作者推荐将input框封装为独立子组件,通过父子组件间的数据传递来管理状态,避免频繁页面渲染,减轻CPU压力和输入卡顿现象。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

不管在使用el-table里面加入input框或者直接渲染input框。当input框很多的时候,会导致页面的CPU增高,从而导致页面卡顿和输入卡顿。

这是由于页面中input框绑定的v-model过多导致 数据双向绑定更新后页面重新渲染次数多、页面数据重新加载次数多。

这里推荐使用把input框封装成子组件处理。不推荐使用防抖节流。因为input框不止输入框,还有选择框、级联选择,还有一些复杂的运算。

组件之间得更新是互不打扰的。

下面是我用VUE3进行代码演示。提供思路。父组件传值给子组件。子组件更新数据后传值给父组件。

子组件

input.vue

<template>
    <el-input v-model="val" :maxlength="props.maxlength" size="small" placeholder="请输入" @change="onChange"></el-input>
</template>
<script setup>

const props = defineProps({
    value:{
        type:String,
        default:''
    },
    maxlength: {
        type: Number,
        default: null
    }
})
const emit =  defineEmits(['change']);

const val = ref('');

watch(
    ()=>props.value,
    (newVal)=>{
        val.value = props.value;
    },
    {
        deep:true,
        immediate:true
    }
)

const onChange = () => {
    emit('change',val.value)
}
onMounted(()=>{
    val.value = props.value;
})
</script>

<style scoped lang="scss">

</style>
父组件
<template>
    <weInput :value="input1" :maxlength="30" @change="onWeChange"></weInput>
</template>
<script setup>
const input1 = ref('');
const weInput = defineAsyncComponent(() => import('/input.vue'));

const onWeChange = (val) => {
    input1.value = val;  
}
</script>

 下面是成功展示

Vue2中,`el-table` 组件与一系列子组件(如`el-input`、`el-select`和`el-cascader`)的嵌套使用可能会导致性能上的卡顿,尤其是在大数据量或者复杂交互的情况下。主要有以下几个可能的原因: 1. **渲染效率**:大量`el-input`和`el-select`可能会触发频繁的数据绑定和DOM更新,特别是当它们关联到表格行数据时。如果数据源非常大或者数据结构复杂,这会增加计算和渲染的工作量。 2. **DOM操作**:`el-cascader`的下拉选择通常会动态添加或移除节点,如果嵌套层级很深,频繁的DOM操作可能导致性能下降。 3. **递归组件**:当`el-cascader`嵌套在多个层级时,会形成树状结构,每个节点都可能触发自身的渲染,这在数据量大的情况下容易造成性能瓶颈。 4. **事件监听**:每个输入选择器都可能有自身的事件监听,过多的事件处理可能会消耗CPU资源。 为了解决这个问题,你可以尝试以下优化策略: - **懒加载和虚拟滚动**:对大数据量的表格,可以考虑使用虚拟滚动,只显示可见区域的数据,减少DOM节点数量。 - **计算属性和缓存**:尽可能减少不必要的数据计算,例如,可以将计算后的值作为缓存,而不是每次都重新计算。 - **优化组件的事件穿透**:检查是否有不需要的事件穿透或者是否能减少事件的触发频率。 - **组件组合优化**:考虑重构组件结构,减少组件的嵌套,或者使用更轻量级的替代组件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值