vue diff 列表数据更新过慢，页面白屏卡顿？

  • Z时代
  • 2024-02-24
  • 分类：IT

页面加载后调用接口返回列表，此列表有赋值操作;
保存后重新调用接口赋值会有此类问题，喧染慢，页面卡死；
数据多的时候尤其明显。

<van-cell v-for="(item, index) in itemList" :key="item.id">
    <template #default>
        <van-form>
          <van-field
            v-model="item.a"
            label="xx"
          ></van-field>
          <van-field
            v-model="item.b"
            label="yy"
          ></van-field>
        </van-form>
    </template>
</van-cell>
axios.get().then(res => {
  this.itemList = res.list
})

问题应该是数据过多 vue diff 操作导致的，
不是静态数据，好像每次更新都会全部更新，
目前解决办法是

axios.get().then(res => {
  this.itemList = [];
  this.$nextTick(()=>{
     this.itemList = res.list
  })
})

可否有其他方法

回答：

通过vue-view-lazy指令实现元素懒加载展示

https://segmentfault.com/a/1190000043750090

回答：

神操作真的是……渲染两遍，数据一多肯定卡啊，直接改成赋值给 this.itemList 不就好了？
为啥要置空之后再清空DOM，然后再赋值，再渲染新的DOM？

axios.get().then(res => {
-  this.itemList = [];
-  this.$nextTick(()=>{
-     this.itemList = res.list
-  })
+  this.itemList = res.list
})

以上是 vue diff 列表数据更新过慢，页面白屏卡顿？ 的全部内容， 来源链接： utcz.com/p/934588.html

回到顶部