vue陣列優化的兩種方法track-by和key 這兩個有什麼區別
阿新 • • 發佈：2018-12-11
1. v-bind:key=" " 是vue2.x提出的，1.x的寫法是track-by=" "
2、（1）vue1.x中v-for不能顯示重複資料，要在v-for的元素內定義track-by="$index"，即以序號為索引，如此當增加或者刪除資料，view都會跟著改變。但是需要注意如此修改的資料並不能同步到頁面，因為其index並沒有改變。如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>track-by和key</title> </head> <body> <div id="app"> <ul> <li v-for="item in list" track-by="$index">{{item}}</li> </ul> </div> <script src="vue1026.js"></script> <script> var vm = new Vue({ el:"#app", data:{ list:['orange','pear','pear','lemon','peach'], } }); </script> </body> </html>
（2）vue2.x中v-for可以顯示重複的資料 ，不需要指定track-by或者key。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>track-by和key</title> </head> <body> <div id="app"> <ul> <li v-for="item in list">{{item}}</li> </ul> </div> <script src="vue221.js"></script> <script> var vm = new Vue({ el:"#app", data:{ list:['orange','pear','pear','lemon','peach'], } }); </script> </body> </html>
