Vue大型表单数据导致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