问题描述:
表格数据是后端接口渲染的,数据量比较大,表格中输入框的数据也是由后端数据渲染的,输入框的值由v-model双向绑定,现在用户输入文字会卡顿,不流畅!
原因:
v-model是双向绑定,数据一旦变化就会触发更新,整个表格的数据比较大,加载自然卡顿;(这里用的原生input框,v-model.lazy生效)
解决方法:
(1)加上修饰符lazy(数据输入完毕,光标失焦或者按enter键才触发视图更新)—— 不卡了,但是出现新的问题—— 输入的数据不会保存,并且会自动复原到原始数据(不行)
(2)input框的值用value来表示,不用v-model——出现的bug跟上面一样(不行)
(3)把该input框抽出来写成一个单独的组件,再引入(可行)