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

新手上路,请多包涵

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

<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
  })
})

可否有其他方法

阅读 2k
2 个回答

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

axios.get().then(res => {
-  this.itemList = [];
-  this.$nextTick(()=>{
-     this.itemList = res.list
-  })
+  this.itemList = res.list
})
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题