vue项目优化点

1、区分v-if和v-show的使用场景:v-if是惰性加载的,只有当条件为true的时候才会渲染,v-show是基于css的display属性进行切换的,不管初始条件是true还是false都是会渲染的,适用于需要频繁切换的场景;

2、v-for的使用,必须为item设置key值,并且避免使用索引值为key值,在使用v-for的同时,避免在同一个元素上使用v-if,因为在vue2中v-for的优先级高于v-if,所以容易造成额外的渲染开销;

3、尽量不要把所有的数据都放在data中,因为data中的数据都会被劫持,会添加getter和setter,性能会降低,所以如果仅仅是用来展示的数据,可以用Object.freeze()把数据冻结起来,这样不会增加getter和setter;

4、尽可能的拆分组件,提高组件的复用率,增加代码的可维护性,减少不必要的渲染,因为修改组件的数据,只会重新渲染当前的组件;

5、懒加载:分为路由懒加载和图片懒加载,其主要就在于按需加载,在需要用到的组件或图片时再加载,不会让项目在一开始运行的时候,就需要加载很多东西导致速度减慢,能大大的优化用户体验。

猜你喜欢

转载自blog.csdn.net/m0_46318298/article/details/128381885