Vue開發(fā)實例探究key的作用詳解

更新時間：2023年01月10日 09:15:52 作者：MAYOHA

這篇文章主要為大家介紹了Vue開發(fā)實例探究key的作用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

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

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

我們先來看兩個例子為了能夠監(jiān)聽元素的創(chuàng)建與銷毀，我們需要將一個div元素封裝為一個組件，取名為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>

通過點擊按鈕改變數(shù)組我們可以發(fā)現(xiàn)因為數(shù)組的改變有一個組件（item 為5的組件）被銷毀，但并沒有新的 Test 組件創(chuàng)建。由此我們可以得出一個結(jié)論：如果元素 key 的值未發(fā)生變化，那么該元素就不會進(jìn)行銷毀與重建。 我們再來看下另外一個例子

 <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>

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

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

 <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>

無論我們點擊哪一個數(shù)字后的刪除按鈕，刪除的都是最后一個數(shù)字。如果使用數(shù)組的值作為 key 則不會出現(xiàn)該錯誤

如果 key 重復(fù)會導(dǎo)致什么樣的錯誤？

想必這個錯大家應(yīng)該都遇見過Duplicate keys detected: 'xx'. This may cause an update error.那么它到底會導(dǎo)致什么樣的更新錯誤呢？
和使用 index 作為 key 所造成的錯誤類似，我們將上述例子的 key 更改為一個固定的值即可復(fù)現(xiàn)該錯誤
不過，在 Vue3 中并不會在控制臺中主動拋出 key 重復(fù)的錯誤。

使用 key 和不使用 key 有什么差別？

復(fù)用上的差別，如果使用 key，只要 key 發(fā)生變化，那么這個元素就必定會被銷毀然后重建，若沒有key，則Vue會盡可能的復(fù)用元素，以獲取性能上的提升。（這應(yīng)該就是Vue文檔中所提到的默認(rèn)行為）我們可以使用上面的例子，通過添加和刪除key來驗證這一結(jié)論