使用vue2.0的v-for渲染一个div,v-for数组变化时,重绘性能很低,页面很卡,如何改善呢?

Question

我使用v-for渲染一个div,然后改变渲染的数组,那么div的内容会重绘,但是页面很卡

//content是组件数组,用作v-for

this.content = ['com1','com2','com3','com4']

<div id="test">
    <div :is="item" v-for="(item,index) in content"></div>
</div>

如果我改变content数组的内容,比如改成:

this.content = ['new1','new2','new3','new4','new5','new6','new7']

那么这时候id为test的div里面的内容会重绘,由于我的组件内容很多,重绘的时候,页面会卡顿,请问有什么好的解决方案吗?

Answer 1

Vue2中动态组件不是这样用的吧？看资料吧 Vue2动态组件，不知道你对这个动态组件循环，是何意思？

Answer 2

加loading