sitemap
知识分享网:一个值得你收藏的网站!
当前位置:网站首页 > JavaScript > 关于VUE性能问题优化的几个点

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

作者:xuhongji发布时间:2020-07-30分类:JavaScript浏览:213评论:0


导读:目前为止,很多人使用了Vue之后都感觉它是一个简单易用的框架,尤其是其中的双向绑定,更是让我们摆脱了操作DOM的繁琐但是最近我在使用Vue的时候,遇到了这么一个问题,我是用了一个大...
目前为止,很多人使用了Vue之后都感觉它是一个简单易用的框架,尤其是其中的双向绑定,更是让我们摆脱了操作DOM的繁琐

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

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

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

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

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

1,合理的拆分VUE实例为多个组件,减少触发事件时的循环性能损耗
2,分页,减少每次渲染的数据量
3,减少每个组件的单次渲染的数据量,通过事件触发渲染剩余的部分
4,减少组件之间的耦合度,尽量避免一个值传递通过多层组件的情况


欢迎 发表评论:

JavaScript排行
«   2021年1月   »
123
45678910
11121314151617
18192021222324
25262728293031
标签列表
网站分类
文章归档
最近发表
推荐文章