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

问题描述:
条件:

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

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

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

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

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


MMTTMM
浏览 4318回答 1
1回答

慕哥9229398

如果 form 是扁平的,清空表单的过程可以考虑改为使用 lodash 的 forEach 逐个属性修改。_.forEach({ 'a': 1, 'b': 2 }, (value, key) => {  this.form.key = value});
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript