目前为止,很多人使用了Vue之后都感觉它是一个简单易用的框架,尤其是其中的双向绑定,更是让我们摆脱了操作DOM的繁琐
但是最近我在使用Vue的时候,遇到了这么一个问题,我是用了一个大约长度有1000的数组,其中的每个值都是一些丰富的对象。
这个时候我直接渲染了这个Vue的实例,渲染起来倒还好,但是这个时候如果我操作其中的一个数组的时候,却发现需要等好久才能完成赋值的变化。
这个时候我马上想到了是因为双向绑定,数据量大的问题,你修改了数组中的其中一个值,但是因为你直接修改的是这个Vue的实例,所以它需要循环整个数组然后才能做出对应的变化。
于是就把一个Vue实例拆分为多个组件,这样的话每次修改只会在单个组件内部出触发修改事件,不会循环整个数组,这样的话效率大大提升。
这样是解决了一部分的性能问题,但是在1000条数据内容比较复杂,或者数据量更多的情况下还会有其它问题,所以优化性能一般有下面几种方案:
1,合理的拆分VUE实例为多个组件,减少触发事件时的循环性能损耗 2,分页,减少每次渲染的数据量 3,减少每个组件的单次渲染的数据量,通过事件触发渲染剩余的部分 4,减少组件之间的耦合度,尽量避免一个值传递通过多层组件的情况