39042


HTML側で、v-forループ表示してるtestListという配列があります。  
初期表示は20件で、ユーザが「次の20件」というボタンを押下時に  
testListにデータが20件追加されます。  
この場合testListの描画は下記のどちらになるのでしょうか？

  1. 1~40件まで全て再描画
  2. 20~40件までが追加描画される

また、1であった場合どのようにしたら2の挙動にできるか  
参考になるようなものをご存知でしたら教えてください。


CC BY-SA 3.0
2017-10-25T06:22:52.090
39018
2017-10-26T06:02:19.377
2017-10-25T08:04:39.653
19110
16768
question
javascript vue.js
v-forのデータ追加時の挙動


「再描画」というのがどのような意味かによりますが、「DOM elementがいったん削除されて新しいのが挿入される」という意味なら、今の場合されません。

[key -
Vue.js](https://v2.vuejs.org/v2/guide/list.html#key)を見ると、デフォルト(`key`なし)ではin-
placeに各elementを更新すると書いてあります。今の場合だと1-20件のelementは、削除・挿入はされません。

また、`key`属性を指定した場合は、配列が更新されると`key`を元に並び替え・削除・挿入が発生します。testListにデータが20件追加されるときに、前の20件の`key`が変わらないのであれば、その中では削除・挿入は発生しません。


CC BY-SA 3.0
2017-10-26T06:02:19.377
39042
2017-10-26T06:02:19.377
2022-09-27T22:35:34.400
-1
20206
39018
answer