vue v-for中key的作用，使用index作為key會怎麼樣？

魂祈梦發表於2024-04-21
VueIndex

原理

　　其主要的目的就是最佳化效能。vue在更新dom時會比較key值相同的元素內容是否發生改變，如果不變則不更新頁面，這樣可以使得儘可能減少頁面的更新，提高效能。假如我渲染3個元素，不設定key值，即預設策略應該是標識為index，即0,1,2。假如我在第一個元素後加一個元素，則實際上原先的bc元素都被改值了，變成了xb。
　　假如我們在新增元素前把b這個item新增為全域性變數，然後按下按鈕新增元素，發現其沒有被銷燬，而是重新渲染了值為x，除了第一個元素其餘元素都渲染了一遍。
　　如果每個item都有一個唯一的key，那麼在資料改變時，vue只需要渲染那個新增的item。也就是說，理想情況下，某個元素的key值是不能被改變的，否則其會以更新後key值為1的x來更新原先key值為1的b。詳細來說就是，bc被更新成xb，然後新增了一個key值為3的c。除了a，渲染了三個元素。而如果將key值確定，則同一個的key的資料沒有進行更新，vue也就不會重新渲染。abc到axbc的過程中，只渲染了x這一個元素，從而提高了效能。
假設我們要在第一個元素後面加一個元素，

寫法

假如我list內部有3個元素，其內容也很簡單，就叫a,b,c

<script setup>
  let list = reactive(['a','b','c'])
  function test() {
    list.splice(1,0,'x');
  }
<script>

<ul>
  <li v-for="item in list">
    {{item}}
  </li>
</ul>
<button @click="test">test</button>

假如我們不寫key，則三者以index標識，即0,1,2。
現在我們要往這個列表裡面加一個元素，假設在ab之間加個x
資料變成['a','x','b','c']
可以發現之前儲存為全域性變數的b現在變成了那個x。
而如果設立了獨特的key，則b還是b，只不過是下移了一些。（具體程式碼不寫了，可以自己試試）

結語

　　原本邏輯很清晰，要說出來還是有些混亂。核心就是: 相同key值的元素如果內容不發生改變，則對應的dom元素不進行更新，從而提高了效能。
　　所以從原理上來說，如果不對list進行修改，那麼不寫key其實也沒有關係，或者說，只要頁面中的list不需要更新（開啟這個頁面後），有沒有這個key應該都是無所謂的。但是如果list需要修改，那還是需要給每個item配置獨一無二的key，以提高頁面的效能。

相關文章