您当前位置: 南顺网络>> 官方资讯>> 建站知识

从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