前言

看了掘金一篇關於Vue開發相關優化技巧，確實發現以前專案中寫的程式碼有些問題，但是無關邏輯問題，當時寫的程式碼感覺載入編譯，甚至邏輯都沒有問題，但是現在想一下，確實是有一些優化方面的問題，也就是說以前寫的程式碼的確是有一些問題的。所以看了這篇帖子，藉此總結一下。

Vue開發中的一些優化方式

• v-show&v-if：當然，我覺得只要讀過Vue開發文件的話，都知道兩者之間的區別，我並不認同所謂的v-if比v-show好這種說法，這個確實是需要根據實際的業務開發，業務需求來決定使用哪個具體的指令。
• v-for&v-if：這個問題確實，以前寫的程式碼明知道文件中建議不要一起使用，但是可能是貪圖方便等，直接寫出了類似的程式碼

<template>
    <div class="zjy">
        <div class="item" v-for='(val,index) in list' :key='index' v-if='val.isShow'>{{val.value}}</div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            list:[]
        }
    },
    methods:{
        getData(){
            this.$axios.get('/getData/zjy').then((res)=>{
                this.list = res.data
            }).catch((err)=>{

            })
        }
    }
}
</script>

這種程式碼的意圖無非就是isShow == true才展示item。但是文件中建議不要講v-for與v-if共同使用。可以這樣處理，

getData(){
    this.$axios.get('/getData/zjy').then((res)=>{
        this.list = res.data.filter((item)=>{
            return item.isShow
        })
    }).catch((err)=>{

    })
}    

或是這樣處理

<template>
    <div class="zjy">
        <div class="item" v-for='(val,index) in handleList' :key='index'>{{val.value}}</div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            list:[]
        }
    },
    computed:{
        handleList(){
            return this.list.filter((item) => {
                return item.isShow
            })
        }
    },
    methods:{
        getData(){
            this.$axios.get('/getData/zjy').then((res)=>{
                this.list = res.data
            }).catch((err)=>{

            })
        }
    }
}
</script>

• v-for&key：在我上面寫的程式碼中就出現了類似的問題，當然平時編寫程式碼時也是這樣編寫，其實這樣是不好的，舉例：

當使用index下標作為key的值，也就是index作為標識的時候。當插入一條資料，列表中後面的key都發生了變化，那麼當前的v-for都會對key變化的element重新渲染，但是其實除了插入的element資料其他的都沒有發生變化，這就導致了沒有必要的開銷。所以建議使用資料中唯一的，如ID等欄位。或是特殊字串拼接index的形式

<template>
    <div class="zjy">
        <div class="item" v-for='(val,index) in handleList' :key='$index'+index>{{val.value}}</div>
    </div>
</template>

• 釋放元件資源：例如邏輯中新增的事件監聽、定義的定時器等，應充分利用生命週期（beforeDestroy）或是路由守衛（beforeRouteLeave）等鉤子函式進行資源釋放。
• 長列表：通過一個v-for將資料遍歷出來，滾動到底部的時候就繼續請求API。隨著資料的載入，DOM會越來越多，這樣就導致了效能開銷的問題產生了，當頁面上的DOM太多的時候，難免給客戶端造成一定的壓力（頁面卡頓，滑動不流暢，渲染時間長），有個很重要的概念（只有出現在檢視上的DOM才是重要的DOM），所以建議應用虛擬列表的概念，網上有一些很好的解決方案：vue-virtual-scroller庫。
• 圖片載入

1. 使用SVG或字型圖示（現在開發中UI同學基本都是這樣提供）
2. base64
3. cdn
4. 懶載入形式載入圖片

• 路由按需載入

// require法
component: resolve=>(require(['@/components/HelloWorld'],resolve))

// import
component: () => import('@/components/HelloWorld') 

• UI框架的使用：建議按需載入，現在UI框架的使用方式在其文件中說的很清楚，按需載入的方式也很清楚
• template：多個元素需要切換，而且切換條件都一樣，一般都會使用一個元素包裹起來，在這個元素上做切換。

<div v-if="status==='ok'">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</div>

如果像上面的 div 只是為了切換條件而存在，還導致元素層級巢狀多一層，那麼它沒有“存在的意義”。我們都知道在宣告頁面模板時，所有元素需要放在<template>元素內。除此之外，它還能在模板內使用，<template>元素作為不可見的包裹元素，只是在執行時做處理，最終的渲染結果並不包含它。

<template>
    <div>
        <template v-if="status==='ok'">
          <h1>Title</h1>
          <p>Paragraph 1</p>
          <p>Paragraph 2</p>
        </template>
    </div>
</template>

同樣的，我們也可以在<template>上使用v-for指令，這種方式還能解決v-for和v-if同時使用報出的警告問題。

<template v-for="item in 10">
    <div v-if="item % 2 == 0" :key="item">{{item}}</div>
</template>

腳手架中的一些優化方式

• 最小化js檔案
• 圖片資源壓縮
• 打包公共程式碼
• 刪除沉澱程式碼
• 依賴CND加速
• Gzip