在 Vue 官網(wǎng)的風格指南中，有很多對于Vue編碼的風格的要求和建議。 在這里，主要解釋在編碼指南中，為優(yōu)先級A：必要的 的編碼規(guī)范的 為 v-for 設置鍵值
相信在編碼初期，很多人都不理解 key 的作用，因為似乎有與沒有，似乎都能完成元素的渲染。（當然，用過 Vue CLI，并設置了 ESlint 的朋友，應該會發(fā)現(xiàn) ESLint 強制要求我們在使用 v-for 時，加入 key，否則在編譯階段會報錯）在官網(wǎng)文檔中，對 key 做出的詮釋是：
如果不使用 key，Vue 會使用一種最大限度減少動態(tài)元素并且盡可能的嘗試就地修改/復用相同類型元素的算法。而使用 key 時，它會基于 key 的變化重新排列元素順序，并且會移除 key 不存在的元素。

由官方文檔，則說明了 key 在 v-for 渲染的元素中，主要是作為唯一標識去讓 Vue "認為"每個元素都是獨一無二的，而不會因為為了減小渲染而復用或修改之前相類似的元素，而導致一些特殊情況的出現(xiàn)。

不使用key的情況

<

測試情況

在上面這個情況中，當我們選中香蕉，再添加一個榴蓮時，會發(fā)現(xiàn)，之前選中的香蕉，變?yōu)檫x中蘋果

這顯然不是我們想要的效果，我們預期的效果是添加一個水果后，之前選中的水果不會變化。

---

使用key的情況

<

測試情況

在上面這個情況中，但我們選中香蕉，再添加一個榴蓮時，則沒有出現(xiàn)選中的水果錯位的情況。這和我們的預期一樣。

---

分析原因

綜上所述，使用 key，在 v-for 渲染的元素中，在某些情況下，出現(xiàn)和預期不一樣的效果。 這就是因為，在 Vue渲染 的時候，通過只修改元素中的文字，而不重新生成整個元素，來減小渲染強度（只改變元素的2個文字，再添加一個元素，相比于摧毀所有元素，并重新創(chuàng)建所有元素，顯然是前者渲染強度小一些。）

關于ESLint的一些觀點

在現(xiàn)在大多數(shù)的情況下，我們都會使用 Vue CLI 來完成項目，在 Vue CLI 中可以選用 ESLint 來對代碼進行一些格式規(guī)范、和編碼規(guī)范。 當然，它有些時候對于編碼的格式太過于嚴苛，而導致很多初期使用的人，會很頭疼，這里可以推薦使用 VSCode 配合 Prettier 插件，在保存時，進行自動格式調整。減小在格式調整上花的時間，又同時可以讓 ESLint 對編碼進行一些檢測，比如上面的例子，在 v-for 中，不使用 key，則會不通過檢測，并給出相應的提示。

以上便是該篇博文的全部內(nèi)容，歡迎各位訪問我的個人博客。
若有任何錯誤和建議，還希望指教！！！VicoHu-個人博客?www.vicohu.com

總結

以上是生活随笔為你收集整理的for根据ID去重_Vue中v-for配合key使用的重要性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。