Vue.js のリストレンダリング( Virtual DOM 実装 )と相性の悪いデータの変更 - kitak blogこの間、現場で直面したやつの個人的なメモです。対象のバージョンはこの記事を書いている時の最新バージョン v2.3.0。 以下のようなリストレンダリングをおこなうコンポーネントがあるとして、 <script> export default { name: 'list', data() { return { items: [1, 2, 3, 4, 5] }; } } </script> <template> <ul v-for="item in items" :key="item"> <li>{{ item }}</li> </ul> </template> items のサイズの上限を 5 として、新しいデータを追加したい場合は古いデータを削除することとする。 例えば、items [1, 2, 3, 4, 5] に 6 と 7 を追加する場合、items は [3, 4, 5, 6, 7]
