关于VUE性能问题优化的几个点

2018-04-17阅读(5935)评论(0)fishCat

苏州实时公交查询

目前为止,很多人使用了Vue之后都感觉它是一个简单易用的框架,尤其是其中的双向绑定,更是让我们摆脱了操作DOM的繁琐

但是最近我在使用Vue的时候,遇到了这么一个问题,我是用了一个大约长度有1000的数组,其中的每个值都是一些丰富的对象。

这个时候我直接渲染了这个Vue的实例,渲染起来倒还好,但是这个时候如果我操作其中的一个数组的时候,却发现需要等好久才能完成赋值的变化。

这个时候我马上想到了是因为双向绑定,数据量大的问题,你修改了数组中的其中一个值,但是因为你直接修改的是这个Vue的实例,所以它需要循环整个数组然后才能做出对应的变化。

于是就把一个Vue实例拆分为多个组件,这样的话每次修改只会在单个组件内部出触发修改事件,不会循环整个数组,这样的话效率大大提升。

这样是解决了一部分的性能问题,但是在1000条数据内容比较复杂,或者数据量更多的情况下还会有其它问题,所以优化性能一般有下面几种方案:

1,合理的拆分VUE实例为多个组件,减少触发事件时的循环性能损耗
2,分页,减少每次渲染的数据量
3,减少每个组件的单次渲染的数据量,通过事件触发渲染剩余的部分
4,减少组件之间的耦合度,尽量避免一个值传递通过多层组件的情况
赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 关于VUE性能问题优化的几个点
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏