從4個方面優化你的(de)Vue項目

運行時優化

1、使用v-if代替v-show

兩者的(de)區别是：v-if不渲染DOM，v-show會預渲染DOM

除以下情況使用v-show，其他情況盡量使用v-if

• 有預渲染需求

• 需要頻繁切換顯示狀态

2、v-for必須加上key，并避免同時使用v-if

一(yī)般我們在兩種常見的(de)情況下會傾向于這樣做(zuò):

• 為(wèi)了過濾一(yī)個列表中的(de)項目 比如(rú) v-for="user in users" v-if="user.isActive"。在這種情形下，請将 users替換為(wèi)一(yī)個計算屬性 (比如(rú)activeUsers)，讓其返回過濾後的(de)列表

• 為(wèi)了避免渲染本應該被隐藏的(de)列表 比如(rú) v-for="user in users" v-if="shouldShowUsers"。這種情形下，請将 v-if 移動至容器元素上 (比如(rú) ul, ol)

3、事件及時銷毀

Vue組件銷毀時，會自(zì)動清理(lǐ)它與其它實例的(de)連接，解綁它的(de)全部指令及事件監聽器，但是僅限于組件本身的(de)事件。

也就是說，在js內(nèi)使用addEventListener等方式是不會自(zì)動銷毀的(de)，我們需要在組件銷毀時手動移除這些事件的(de)監聽，以免造成內(nèi)存洩露，如(rú)：

created() {   addEventListener('touchmove', this.touchmove, false) }, beforeDestroy() {   removeEventListener('touchmove', this.touchmove, false) } 複制代碼

4、首屏優化圖片裁剪、使用webp

• 圖片需要裁剪，一(yī)般使用二倍圖即可(kě)

• 盡量使用webp圖片

• 如(rú)果使用了vue-lazyload插件，可(kě)以使用以下方法一(yī)鍵替換webp（替換使用v-lazy指令的(de)圖片）

Vue.use(VueLazyload, {   error: require('./assets/img/defaultpic_small.png'),   filter: {     webp (listener: any, options: any) {       if (!options.supportWebp) return       // listener.src += '.webp'     }   } });

編輯:--ns868