list rendering optimization fails in some cases

[miquels]

I have virtual scrolling list with a lot of rows. I only show a few of them at a time using

this.view = this.items.splice(position, position + 5)

If 'position' is incremented or decremented, you would expect that in the DOM one element gets added, and one gets deleted. In the 'up' direction, that is the case. But in the down direction, all elements get removed and added again. I have a couple of images in each row, and this hurts performance quite a bit.

Vue.js version

2.1.3

Reproduction Link

https://jsbin.com/netereyuxa/1/edit?html,console,output

Steps to reproduce

press up / down, see that in the up direction one LI is removed and one added at each step, and in the down direction all LIs are replaced every time.

What is Expected?

Only one LI added, one LI removed

What is actually happening?

All LI's removed and added