Vue大型表单数据导致el-input输入卡顿解决方案
Vue大型表单数据导致el-input输入卡顿解决方案说明在我们的日常开发中,可能会遇到一个大型的表单页面包含非常多个el-select及el-input组件的情况。如:对于这样大型的表单数据,尤其一些下拉选项非常多甚至还要从接口获取时,会容易出现两个问题:1、el-select组件操作卡顿2、el-input组件输入延迟卡顿,即在输入框里输入、删除一些字符,会有明显的延迟对于第一个问题,网上有很
Vue大型表单数据导致el-input输入卡顿解决方案
说明
在我们的日常开发中,可能会遇到一个大型的表单页面包含非常多个el-select及el-input组件的情况。如:
对于这样大型的表单数据,尤其一些下拉选项非常多甚至还要从接口获取时,会容易出现两个问题:
1、el-select组件操作卡顿
2、el-input组件输入延迟卡顿,即在输入框里输入、删除一些字符,会有明显的延迟
对于第一个问题,网上有很多解决办法,通常是:下拉数据动态获取、减少数据量
此处主要讲第二个问题的解决方案:
问题的出现
大型表单数据导致vue中的el-input出现卡顿,最简单的解释就是,我们用一个对象,绑定了非常多的表单数据,当el-input数据更新时,vue组件会去渲染整个dom树,导致耗时非常的长。
具体解释,可详见下文分析:
百度文库 -vue 大型表单项目,input 输入数据时卡顿是怎么回事?
解决办法
知道了这个原因,其实要解决起来非常简单,就像上文说道的,我们将这个vue组件,拆成几个vue子组件即可。
可重构成下面这种多组件形式:
<div>
<div>
<el-form ref="form1" :model="patientData">
......部分表单
</el-form>
<div>
<child :data="patientData">
....丢去子组件
</child>
</div>
如果在子组件中不会改动整个对象,可以简单的将表单所绑定的这个值通过props传递给子组件,这样父组件可以将初始值传递给子组件,子组件也可以改动表单值同步改动。(其他情况不能这样写哦,详见vue中props的单向数据绑定:https://vue3js.cn/docs/zh/guide/component-props.html#单向数据流)
Tips: props传值,父组件向子组件传递对象为什么可以直接修改不报错?
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。
另外,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。
但是当父组件的传值是数组或者对象时,子组件中不仅能够直接修改,还不会报错,在子组件中改变这个对象或数组本身将会影响到父组件的状态。
这是因为:对象类型是存放在堆空间的,在栈空间中只是保留了对象的引用地址,当 JavaScript 需要访问该数据的时候,是通过栈中的引用地址来访问的,所以,父组件传递给子组件的,实际上只是一个引用地址,当子组件修改这个对象时,是真的修改了在堆空间中保存的数值,当然父组件中的值也会发生变化,但是引用地址没有进行修改,所以并没有报错。
参考文章:
https://www.cnblogs.com/pangchunlei/p/12110869.html
https://wenku.baidu.com/view/076b5487bbf3f90f76c66137ee06eff9aef849ef.html
更多推荐
所有评论(0)