vue 中的 key 有什麼作用?

2022-05-17 05:50:21 字數 713 閱讀 3587

key 是為 vue 中 vnode 的唯一標記,通過這個 key,我們的 diff 操作可以更準確、更快速。

vue 的 diff 過程可以概括為:

oldch 和 newch 各有兩個頭尾的變數 oldstartindex、oldendindex 和 newstartindex、newendindex,它們會在新節點和舊節點會進行兩兩對比

即一共有4種比較方式:newstartindex 和oldstartindex 、newendindex 和 oldendindex 、newstartindex 和 oldendindex 、newendindex 和 oldstartindex,如果以上 4 種比較都沒匹配.

如果設定了key,就會用 key 再進行比較,在比較的過程中,遍歷會往中間靠,一旦 startidx > endidx 表明 oldch 和 newch 至少有乙個已經遍歷完了,就會結束比較。

所以 vue 中 key 的作用是:key 是為 vue 中 vnode 的唯一標記,通過這個 key,我們的 diff 操作可以更準確、更快速!

function

createkeytooldidx (children, beginidx, endidx)

for (i = beginidx; i <= endidx; ++i)

return

map}

vue中key的作用

v for中為什麼要加key呢,這裡我給大家舉個栗子 沒有key text v model name add 新增 button div for item,i in list checkbox li ul 建立 vue 例項,得到 viewmodel var vm newvue methods th...

Vue中key的作用

相信大多數vue開發者接觸到key屬性的時候是使用v for進行列表渲染的時候,如果不使用key屬性,vue會產生警告,那麼在這個時候key屬性的作用是什麼呢?官方文件中說 當 vue.js 用v for正在更新已渲染過的元素列表時,它預設用 就地復用 策略。如果資料項的順序被改變,vue 將不會移...

vue中key的作用

vue和react都實現了一套虛擬dom,使我們可以不直接操作dom元素,只運算元據便可以重新渲染頁面。其功勞歸功於背後高效的diff演算法。兩個相同的元件產生類似的dom結構,不同的元件產生不同的dom結構。同一層級的一組節點,他們可以通過唯一的id進行區分。當頁面的教據發生變化時,diff演算法...