您當前位置: 南順網絡>> 官方資訊>> 建站知識

從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