v for中key屬性的作用

2022-08-09 05:42:10 字數 1678 閱讀 1814

key

當 vue.js 用v-for正在更新已渲染過的元素列表時,它預設用「就地復用」策略。如果資料項的順序被改變,vue 將不會移動 dom 元素來匹配資料項的順序, 而是簡單復用此處每個元素,並且確保它在特定索引下顯示已被渲染過的每個元素。我們在使用的使用經常會使用index(即陣列的下標)來作為key,但其實這是不推薦的一種使用方法。

舉個index作為key的例子:

1

const list = [2,

6,10,

14 ]

1

<

div

v-for

="(item, index) in list"

:key

="index"

>}

div>

下面我們來看一看用index作為key的缺陷

1.在最後一條資料後再加一條資料

1

const list = [2,

6,10,

14,18 ]

執行結果:

之前的資料                         之後的資料

key: 0 index: 0 name: test1 key: 0 index: 0 name: test1

key: 1 index: 1 name: test2 key: 1 index: 1 name: 我是插隊的那條資料

key: 2 index: 2 name: test3 key: 2 index: 2 name: test2

key: 3 index: 3 name: test3

2.在中間插入一條資料

1

const list = [2,

610,14

,18 ]

執行結果:

之前的資料                         之後的資料

key: 1 id: 1 index: 0 name: test1 key: 1 id: 1 index: 0 name: test1

key: 2 id: 2 index: 1 name: test2 key: 4 id: 4 index: 1 name: 我是插隊的那條資料

key: 3 id: 3 index: 2 name: test3 key: 2 id: 2 index: 2 name: test2

key: 3 id: 3 index: 3 name: test3

通過上面清晰的對比,發現用index作為key的方式除了第乙個資料可以復用之前的之外,另外三條資料都需要重新渲染。然而用每條資料的id作為key來標識資料的唯一性這種方式,只有新新增的資料需要渲染,其他的資料復用之前的資料。顯然後一種方式更加的高效。

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

至於其中的原因是因為virtual dom 使用diff演算法實現的,詳解請參考官方文件或參考部落格

v for中key屬性的作用

key 當 vue.js 用v for正在更新已渲染過的元素列表時,它預設用 就地復用 策略。如果資料項的順序被改變,vue 將不會移動 dom 元素來匹配資料項的順序,而是簡單復用此處每個元素,並且確保它在特定索引下顯示已被渲染過的每個元素。我們在使用的使用經常會使用index 即陣列的下標 來作...

vue 元件v for 繫結key屬性的作用

參考 vue的常見問題 關於vue的面試 當vue中使用 v for 更新已經渲染過的元素列表時,預設用 就地復用 策略。如果資料項的順序被改變,vue將不是移動dom元素來匹配資料項的改變,而是簡單復用此處每個元素,並且確保它在特定索引下顯示已被渲染過的每個元素。為了給vue 乙個提示,以便它能跟...

Vue指令v for和key屬性

迭代陣列 迭代物件中的屬性 迭代數字 這是第 個p標籤 2.2.0 的版本裡,當在元件中使用v for 時,key 現在是必須的。當 vue.js 用 v for 正在更新已渲染過的元素列表時,它預設用 就地復用 策略。如果資料項的順序被改變,vue將不是移動 dom 元素來匹配資料項的順序,而是簡...