vue开发中发现一个问题:
我在一个页面写了个v-for,有50条数据,每条数据都20个字段,其中一个字段是数组,里面又包含了40条数据,然后挑其中5个字段做成50个花花绿绿的卡片(这是页面一),可以点进去弹窗(Model)查看其他15个字段内容(含40条数据,这是页面二)。
但是发现,数据太多导致了渲染卡顿,在页面一/二上加一个输入框,不写任何复杂的逻辑,但是却输一个数字,卡顿5s才会输出来,然后页面一打开页面二,也要打开10s才能把他打开(这里不涉及复杂运算)。
试过vue-virtual-scroller(虚拟列表),并没有太过有效提升速度,后来做了个分页才减少卡顿,不过这个输入框的卡顿也只是从5s变为2s这样子。
但是在测试中发现,渲染数目再多,自定义组件的Model中的输入框速度并不受影响,反应很快;但是页面中的Model中的输入框却明显卡顿,想问问为什么?