-
前言
一切學(xué)習(xí)都是為了加薪; 為了跟直觀的帶大家了解diff
附上一張很久都不舍得扔的手抄紙, 盡管字那么丑
簡述key的作用
我們都知道在
v-for的時候會讓我們加key并賦值唯一標(biāo)示, 但是這個key的作用是什么? 坐好小板凳 我們細(xì)細(xì)道來
key 其實(shí)就是虛擬dom中的標(biāo)識; 當(dāng)狀態(tài)發(fā)生變化時, 在react 、vue中數(shù)據(jù)會生成新的虛擬dom與舊數(shù)據(jù)的虛擬dom的diff 進(jìn)行比較.從而減少消耗;
那么diff中比較的規(guī)則又是什么樣的呢? 為什么不推薦用index 作為key呢?
diff 規(guī)則
-
若
舊虛擬dom找到了與新虛擬dom的key相同:- 若虛擬dom中內(nèi)通過沒變,則直接返回; 使用之前的真實(shí)dom
- 若虛擬dom中的內(nèi)容發(fā)生變化; 則生成新的真實(shí)dom; 隨后替換掉頁面中之前的真實(shí)dom
-
若
舊虛擬dom未找到與新虛擬dom相同的key- 會根據(jù)數(shù)據(jù)創(chuàng)建新的真實(shí)dom; 然后渲染到頁面中
新虛擬dom跟舊虛擬dom 對比
為什么不推薦index 作為key; 究竟會引發(fā)什么問題?
- 若對數(shù)據(jù)進(jìn)行處理
逆序添加、逆序刪除等破壞操作, 會產(chǎn)生沒必要的真實(shí)dom產(chǎn)生(頁面效果沒有問題; 但是效率低下) - 如果結(jié)構(gòu)中包含了
input輸入類等真實(shí)dom, 則會產(chǎn)生錯誤dom更新; (頁面數(shù)據(jù)顯示錯誤) - 如果數(shù)據(jù)不存在
逆序添加辉川、逆序刪除操作, 僅用于渲染展示; 使用index則不會出現(xiàn)問題!
日常開發(fā)中最好還是使用每條數(shù)據(jù)中的唯一性標(biāo)識作為key; 但是只是為了展示; index 也是可以的
歡迎一起留言討論; 多健身不掉頭發(fā)哦~
