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

最新推荐文章于 2025-03-13 16:23:11 发布

置顶 i紸定i

最新推荐文章于 2025-03-13 16:23:11 发布

阅读量4.3k

点赞数 11

文章标签：前端 elementui javascript

本文链接：https://blog.youkuaiyun.com/qq_38508172/article/details/135403516

版权

文章讨论了在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>

下面是成功展示