v for中key屬性的作用

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 元素來匹配資料項的順序，而是簡...