1.key的設置

在vue中，是不建議我們使用index作為key的，假設現在我們在100個元素的對象中間添加一個屬性，此時插入位置后面所有的元素的index都需要加1，vue是只要檢測到key發生改變就對該Element進行重新渲染，但是如果我們使用id作為key,無論怎么對數據進行增刪改都不會影響其他元素的key,那么就不需要進行多余的重新渲染。

key的主要作用在于：虛擬DOM算法時候，在新舊node對比時能夠快速定位到相同節點。

在某些情況下，vue也可以不使用key,這種就地復用的策略在普通列表中不會出現問題的,這種處理方式是默認的列表渲染策略, 因為更高效.

1.采用就地復用

2.不采用就地復用

其實key還有一個作用，在官方文檔中有提到：
那就是強制替換組件或者替換替換元素

<transition><span :key="text">{{ text }}</span> </transition>

當我們在上面代碼中去修改text,那么這個時候span一定是會被替換而不是簡單的修改，這個時候就會觸發過渡動畫效果！同樣的道理當我們在組件上去設置這樣的操作時，我們就會替換整個組件，實現再次觸發完整的組件生命周期

2.大數據量的列表渲染

大部分新手在遇到這種列表渲染會優先想到v-for給循環下來，但是如果數據量特別大的時候，會造成頁面的滾動時候的卡頓，問題的根源就是DOM，太多，當然了我們可以選擇進行分頁操作來減少當前客戶端的列表數量，其實我們還有一個更好的方案，就是選用vue-virtual-scroller這個現成的輪子
https://github.com/Akryum/vue-virtual-scroller
這個插件實際上就是，每次只渲染規定的條數，從而減少渲染，其他的滾動部分做一個虛假的滾動條，但是不渲染數據。

3.圖片的處理

1.小圖標盡量用字體圖標

輕松地改變圖標的顏色

改變圖標的大小，就像改變字體大小一樣容易

縮小放大圖標不會影響清晰度

支持所有現代瀏覽器，兼容性好

2.通過 base64 和 webp 的方式加載小型圖片

http://tool.chinaz.com/tools/imgtobase轉成base64的網站、
https://tinypng.com/ 壓縮圖片的網站

WebP 具有更優的圖像數據壓縮算法，能帶來更小的圖片體積

3.使用cdn加速的大圖加載速度

去中心化，從最近的節點獲取數據

總結

以上是生活随笔為你收集整理的vue项目的一些需要注意到的细节的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。