為什麼v for迴圈時要寫上key

2022-07-23 21:06:17 字數 825 閱讀 8383

當 vue.js 用 v-for 正在更新已渲染過的元素列表時,它預設用「就地復用」策略。如果資料項的順序被改變,vue 將不會移動 dom 元素來匹配資料項的順序, 而是簡單復用此處每個元素,並且確保它在特定索引下顯示已被渲染過的每個元素。這個類似 vue 1.x 的 track-by="$index" 。

這個預設的模式是高效的,但是只適用於不依賴子元件狀態或臨時 dom 狀態 (例如:表單輸入值) 的列表渲染輸出。

為了給 vue 乙個提示,以便它能跟蹤每個節點的身份,從而重用和重新排序現有元素,你需要為每項提供乙個唯一 key 屬性。理想的 key 值是每項都有的唯一 id。這個特殊的屬性相當於 vue 1.x 的 track-by ,但它的工作方式類似於乙個屬性,所以你需要用 v-bind 來繫結動態值 (在這裡使用簡寫):

建議盡可能在使用 v-for 時提供 key,除非遍歷輸出的 dom 內容非常簡單,或者是刻意依賴預設行為以獲取效能上的提公升。

因為它是 vue 識別節點的乙個通用機制,key 並不與 v-for 特別關聯,key 還具有其他用途,我們將在後面的指南中看到其他用途。

以上來自 vue官方文件

簡單來說,vue在進行頁面更新時,會通過diff演算法對虛擬dom進行更新,因為真實的dom消耗比較大。 假設我們需要對陣列進行增刪改查,我們需要快速定位到某一項,所以我們需要給每項綁乙個具體的唯一的id值

為什麼要寫部落格?

一直想堅持寫部落格,但是總是以各種理由推脫,今天下決心果斷邁出第一步,下決心以後堅持寫,希望大家監督!為什麼開始寫部落格?1.對自己所學的知識進行歸納整理,可以促進思考,有益於加深對知識點的理解記憶,也便於以後快速複習掌握 2.積累下自己的經驗的同時分享給有需要的人,幫助後來者少走彎路 3.寫作是記...

為什麼要寫部落格

以前在學校階段就開始記錄使用包括 為知筆記 有道雲筆記 evernote 等記錄技術要點,目前主要使用evernote,也就是國際版的 印象筆記 使用什麼工具記錄技術要點到還是其次,這個作為技術積累來說並不要緊。要緊的是記錄什麼內容。記錄什麼內容反映了乙個技術人員的胸懷和關注點的大小。最初記錄技術要...

為什麼要寫作?

從 2018 年 10 月 21 日開始寫一些東西,至今 216 天,寫一篇關於寫作的體會。對我來說,寫作的一開始是為了打卡完成 arts 極客時間 左耳聽風 專欄作業 每週分享一些技術或是其他方面的思考,這也是我正在做的事。對於現在的我來說,賺錢 並不是我的首要目的,而且現在水平還相差甚遠。總的來...