前言

一提到 vue 中的 key，你會(huì)想到什么？使用v-for時(shí)需要使用 key ？key 不能重復(fù)？建議不要使用 index 來做key的值？這究竟是為什么呢？就下來我們就一起來通過實(shí)例來一探究竟。

為什么不推薦使用 index 作為 key？

我們先來看兩個(gè)例子 為了能夠監(jiān)聽元素的創(chuàng)建與銷毀，我們需要將一個(gè)div元素封裝為一個(gè)組件，取名為Test

 <template>
   <div>
     {{ Math.floor(Math.random() * 100) }}
   </div>
 </template>
 <script>
 export default {
   props: ["mark"],
   mounted() {
     console.log("create", this.mark)
   },
   beforeDestroy() {
     console.log("destroy", this.mark)
   }
 }
 </script>

使用 index 作為 key

 <template>
   <div>
     <Test v-for="(item,index) in arr" :key="index" :mark="item"></Test>
     <button @click="changeArr">change</button>
   </div>
 </template>
 <script>
 import Test from './Test'
 export default {
   data() {
     return {
       arr: [1,2,3,4,5]
     }
   },
   components: {
     Test
   },
   methods: {
     changeArr() {
       this.arr = [6,7,8,9]
     }
   }
 };
 </script>

通過點(diǎn)擊按鈕改變數(shù)組我們可以發(fā)現(xiàn)因?yàn)閿?shù)組的改變有一個(gè)組件（item 為5的組件）被銷毀，但并沒有新的 Test 組件創(chuàng)建。由此我們可以得出一個(gè)結(jié)論：如果元素 key 的值未發(fā)生變化，那么該元素就不會(huì)進(jìn)行銷毀與重建。 我們?cè)賮砜聪铝硗庖粋€(gè)例子

 <template>
   <div>
     <Test v-for="item in arr" :key="item" :mark="item"></Test>
     <button @click="changeArr">change</button>
   </div>
 </template>
 <script>
 import Test from './Test'
 export default {
   data() {
     return {
       arr: [1,2,3,4,5]
     }
   },
   components: {
     Test
   },
   methods: {
     changeArr() {
       this.arr = [5,4,3,2,6]
     }
   }
 };
 </script>

上述兩個(gè)例子的代碼區(qū)別是：綁定的 key 不同 通過點(diǎn)擊按鈕改變數(shù)組，每個(gè)元素的 key 都會(huì)發(fā)生變化，所以元素都會(huì)被銷毀，然后重新創(chuàng)建，但事實(shí)并非如此。

實(shí)驗(yàn)結(jié)果是：只有key為1的元素被銷毀，key為6的元素被創(chuàng)建 其實(shí)這也是合理的，我最初的key為2，改變之后的key為3，但是key為3這個(gè)元素之前就存在，這就意味著我可以直接使用key為3的這個(gè)元素，無需銷毀再創(chuàng)建。 所以我們之前的結(jié)論還需要進(jìn)一步的完善：如果元素 key 的值發(fā)生改變但未產(chǎn)生新的key，那么Vue就會(huì)復(fù)用之前key的那個(gè)元素。 所以為什么不推薦 index 作為 key？ 雖然上述的兩個(gè)例子都會(huì)復(fù)用 key，但他們最大的區(qū)別在于，使用index作為key會(huì)產(chǎn)生一個(gè)副作用，若使用數(shù)據(jù)本身則不會(huì)產(chǎn)生副作用。 通過第一個(gè)例子我們可以發(fā)現(xiàn)，即使我們的數(shù)據(jù)發(fā)生了翻天覆地的變化，但因?yàn)槲覀兪褂胕ndex作為key，所以元素不會(huì)被銷毀與重建，這就會(huì)導(dǎo)致我們?cè)?/strong>mounted、created等鉤子中做的一些操作無法生效，若這些鉤子中有依賴父組件傳來的值，那造成的影響將是致命的。 我們?cè)倏匆粋€(gè)使用 index 引起更新錯(cuò)誤的例子

 <template>
   <div>
     <div v-for="(item, index) in arr" :key="index">
       <Test></Test>
       <button @click="deleteItem(index)">delete</button>
     </div>
   </div>
 </template>
 <script>
 import Test from './Test'
 export default {
   name: 'App',
   data() {
     return {
       arr: [1,2,3,4,5]
     }
   },
   components: {
     Test
   },
   methods: {
     deleteItem(i) {
       this.arr.splice(i, 1)
     }
   }
 }
 </script>