[防抖函数] Vue2 输入控件过多卡顿, v-model绑定导致的输入框卡顿问题

问题

因为编辑界面的控件过多, 导致 <a-textarea/> 输入框卡顿.

原因

每次输入字符时, 都会引发Vue组件的绑定值更改, 从而触发更新视图事件; 而实际上并不需要实时更新视图.

输入框输入字符 => 更新到绑定属性 => Vue事件 => 更新输入框字符为属性的值(实际上和输入的字符一样, 多此一举)

解决办法

使用延长触发器(防抖函数)

方法代码

import debounce from "lodash/debounce";

setTextareaValue: debounce((value, condition, field) => {  
condition[field] = value;  
}, 300),

模板代码. 控件是 antdv 的文本域控件

<a-textarea  
:value="condition_edit_form_data.remark"  
@input="setTextareaValue($event.target.value, condition_edit_form_data, 'remark')"  
placeholder="请输入备注信息"  
:auto-size="{ minRows: 3, maxRows: 5 }"  
/>