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