javascript - Vue一次性渲染比较多的数据时界面会卡住一下。

问题描述

问 题

问题描述：
条件：

1. 有一个比较多内容的表单，用一个叫form的对象存储起来了数据，用v-model将里面的key绑定在了元素上；

2. 有两个按钮: 一个是编辑，一个是新建

3. 当点击编辑按钮的时候，会先获取数据，直接赋值给form对象，然后表单展示获取到的数据；

4. 这时候点击新建按钮，会先清空表单，然后展示一个空的表单；

问题：
在第4步的时候清空表单的时候，我采用的方式是form = JSON.parse(JSON.stringify(初始表单))，然后在form里面的数据改变后，Vue检测到数据的变化时重新渲染，因为需要重新渲染的数据较多，所以渲染的时候会卡住那么一两秒，如何解决这个问题？大家有什么好的思路吗？

解决方案

如果 form 是扁平的，清空表单的过程可以考虑改为使用 lodash 的 forEach 逐个属性修改。

_.forEach({ 'a': 1, 'b': 2 }, (value, key) => {
  this.form.key = value
});

这篇关于javascript - Vue一次性渲染比较多的数据时界面会卡住一下。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！