你知道vue中key的作用和工作原理嗎？說說你對它的理解。
阿新 • • 發佈：2021-06-19
你知道vue中key的作用和工作原理嗎？說說你對它的理解。
原碼中找答案：src\corelvdom\patch.js-updateChildren（）
測試程式碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="demo"> <p v-for="item in items" :key="item"> {{ item }} </p> </div> <script src="./js/vue.js"></script> <script> // 建立例項 const app = new Vue({ el: '#demo', data: { items: ['a', 'b', 'c', 'd', 'e'] }, mounted () { setTimeout(() => { this.items.splice(2, 0, 'f') }, 2000) }, }) </script> </body> </html>
上面案例重現的是以下過程
不使用key
如果使用key
// 首次迴圈patch A
A B C D E
A B F C D E
// 第2次迴圈patch B
B C D E
B F C D E
// 第3次迴圈patch E
C D E
F C D E
// 第4次迴圈patch D
C D
F C D
// 第5次迴圈patch C
C F
C
// oldCh全部處理結束，newCh中剩下的F，建立F並插入到C前面
結論
- key的作用主要是為了高效的更新虛擬DOM，其原理是vue在patch過程中通過key可以精準判斷兩
個節點是否是同一個，從而避免頻繁更新不同元素，使得整個patch過程更加高效，減少DOM操
作量，提高效能。 - 另外，若不設定key還可能在列表更新時引發一些隱蔽的bug
- vue中在使用相同標籤名元素的過渡切換時，也會使用到key屬性，其目的也是為了讓vue可以區分
它們，否則vue只會替換其內部屬性而不會觸發過渡效果。