先來給官方的回答，再講講我自己的理解，哈哈，
1. key的作用主要是為了高效的更新虛擬DOM，其原理是vue在patch程序中 會執行patch vnode，patch vnode的程序中會執行updateChildren這個方法【patch.js中 重排演算法】， 他會去更新兩個新舊的子元素，在這個程序中，通過key可以精準判斷兩個節點是否是同一個，從而避免頻繁更新不同元素，使得整個patch程序更加高效，減少DOM操作量，提高性能，
2. 另外，若不設定key還可能在串列更新時引發一些隱蔽的bug【比如說有一行不應該更新的，但是更新了，】
3. vue中在使用相同標簽名元素的過渡切換時，也會使用到key屬性，其目的也是為了讓vue可以區分它們，否則vue只會替換其內部屬性而不會觸發過渡效果，
比如說在data里面，你有一個陣列資料：user:[A , B , C , D , E]，你先在索引值為2也就是C那里插入一個F，如果你沒有給每一項設定key的話，Vue會更新A、B后的所有項，（這里就有點涉及到原始碼，因為沒有設定key,所以他們的key都是undefined,然后A、B也沒有改變啥，所以就不會更新A、B，）然后再插入E，如圖：
就是他會遍歷(A、B)后每一項，然后更新(A、B)后每一項的內容，做了大量的dom操作，
如果使用key呢，那就直接如圖：
Vue就可以直接通過可以key找到對應的dom節點，然后插入F，把后面的資料往后排，不會說更新(A、B)后每一項的內容，就減少的大量的dom操作，
有興趣的小伙伴可以加我微信Leyman233一起交流前端，哈哈
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/392142.html
標籤：其他
下一篇：03 撰寫登錄頁面