key
當 vue.js 用v-for正在更新已渲染過的元素列表時，它預設用「就地復用」策略。如果資料項的順序被改變，vue 將不會移動 dom 元素來匹配資料項的順序， 而是簡單復用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。我們在使用的使用經常會使用index(即陣列的下標)來作為key,但其實這是不推薦的一種使用方法。
舉個index作為key的例子：
1 const list = [2 ,
6 ,
10 ,
14 ]
1 }下面我們來看一看用index作為key的缺陷
1.在最後一條資料後再加一條資料
1 const list = [執行結果：2 ,
6 ,
10 ,
14 ,
18 ]
之前的資料 之後的資料2.在中間插入一條資料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
1 const list = [執行結果：2 ,
6
10 ,
14 ,
18 ]
之前的資料 之後的資料通過上面清晰的對比,發現用index作為key的方式除了第乙個資料可以復用之前的之外,另外三條資料都需要重新渲染。然而用每條資料的id作為key來標識資料的唯一性這種方式，只有新新增的資料需要渲染，其他的資料復用之前的資料。顯然後一種方式更加的高效。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
建議盡可能在使用v-for時提供key，除非遍歷輸出的 dom 內容非常簡單，或者是刻意依賴預設行為以獲取效能上的提公升。
至於其中的原因是因為virtual dom 使用diff演算法實現的，詳解請參考官方文件或參考部落格
key
當 vue.js 用v-for正在更新已渲染過的元素列表時，它預設用「就地復用」策略。如果資料項的順序被改變，vue 將不會移動 dom 元素來匹配資料項的順序， 而是簡單復用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。我們在使用的使用經常會使用index(即陣列的下標)來作為key,但其實這是不推薦的一種使用方法。
舉個index作為key的例子：
1 const list = [2 ,
6 ,
10 ,
14 ]
1 }下面我們來看一看用index作為key的缺陷
1.在最後一條資料後再加一條資料
1 const list = [執行結果：2 ,
6 ,
10 ,
14 ,
18 ]
之前的資料 之後的資料2.在中間插入一條資料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
1 const list = [執行結果：2 ,
6
10 ,
14 ,
18 ]
之前的資料 之後的資料通過上面清晰的對比,發現用index作為key的方式除了第乙個資料可以復用之前的之外,另外三條資料都需要重新渲染。然而用每條資料的id作為key來標識資料的唯一性這種方式，只有新新增的資料需要渲染，其他的資料復用之前的資料。顯然後一種方式更加的高效。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
建議盡可能在使用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 元素來匹配資料項的順序，而是簡...