从4个方面优化你的Vue项目
运行时优化
1、使用v-if代替v-show
两者的区别是:v-if不渲染DOM,v-show会预渲染DOM
除以下情况使用v-show
,其他情况尽量使用v-if
有预渲染需求
需要频繁切换显示状态
2、v-for必须加上key,并避免同时使用v-if
一般我们在两种常见的情况下会倾向于这样做:
为了过滤一个列表中的项目 比如
v-for="user in users" v-if="user.isActive"
。在这种情形下,请将users
替换为一个计算属性 (比如activeUsers
),让其返回过滤后的列表为了避免渲染本应该被隐藏的列表 比如
v-for="user in users" v-if="shouldShowUsers"
。这种情形下,请将v-if
移动至容器元素上 (比如 ul, ol)
3、事件及时销毁
Vue组件销毁时,会自动清理它与其它实例的连接,解绑它的全部指令及事件监听器,但是仅限于组件本身的事件。
也就是说,在js内使用addEventListener等方式是不会自动销毁的,我们需要在组件销毁时手动移除这些事件的监听,以免造成内存泄露,如:
created() { addEventListener('touchmove', this.touchmove, false) }, beforeDestroy() { removeEventListener('touchmove', this.touchmove, false) } 复制代码
4、首屏优化图片裁剪、使用webp
图片需要裁剪,一般使用二倍图即可
尽量使用webp图片
如果使用了vue-lazyload插件,可以使用以下方法一键替换webp(替换使用v-lazy指令的图片)
Vue.use(VueLazyload, { error: require('./assets/img/defaultpic_small.png'), filter: { webp (listener: any, options: any) { if (!options.supportWebp) return // listener.src += '.webp' } } });
编辑:--ns868