HTML側で、v-forループ表示してるtestListという配列があります。
初期表示は20件で、ユーザが「次の20件」というボタンを押下時に
testListにデータが20件追加されます。
この場合testListの描画は下記のどちらになるのでしょうか?
- 1~40件まで全て再描画
- 20~40件までが追加描画される
また、1であった場合どのようにしたら2の挙動にできるか
参考になるようなものをご存知でしたら教えてください。
「再描画」というのがどのような意味かによりますが、「DOM elementがいったん削除されて新しいのが挿入される」という意味なら、今の場合されません。
key - Vue.jsを見ると、デフォルト(key
なし)ではin-placeに各elementを更新すると書いてあります。今の場合だと1-20件のelementは、削除・挿入はされません。
また、key
属性を指定した場合は、配列が更新されるとkey
を元に並び替え・削除・挿入が発生します。testListにデータが20件追加されるときに、前の20件のkey
が変わらないのであれば、その中では削除・挿入は発生しません。