<h3 dir="auto">Version</h3>
<p dir="auto">2.5.13</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://jsfiddle.net/8s42h4bp/25/" rel="nofollow">https://jsfiddle.net/8s42h4bp/25/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto"><code class="notranslate">&lt;div v-for="row in visible" :key="row"&gt;{{row}}&lt;/div&gt;</code></p>
<p dir="auto">Case A (no problem): visible = rows.slice(100, 110) followed by visible = rows.slice(99, 109)</p>
<p dir="auto">Case B (problem): visible = rows.slice(100, 110) followed by visible = rows.slice(101, 111)</p>
<p dir="auto">The first reuses DOM elements, while the latter appears to create new ones. This can be seen by inspecting the div boxes in firefox and see them all flashing orange when clicking the "down" button, but not the "up" button in the minimal reproduction. Why is this so, is it some kind of optimization, or is it a bug?</p>
<p dir="auto">I am trying to do this when scrolling a page up/down to only show rows that are in view in a huge table. It is visibly faster to scroll up than down, despite all elements being absolutely positioned. Happens in both Chrome and Firefox.</p>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">DOM elements are reused in both case A and B.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">DOM elements appear to be recreated in case B, potentially causing unnecessary performance hit and contradicting:<br>
<a href="https://vuejs.org/v2/guide/list.html#Replacing-an-Array" rel="nofollow">https://vuejs.org/v2/guide/list.html#Replacing-an-Array</a></p>
<hr>
<p dir="auto">Loving Vue, keep up the great work!</p>
<p dir="auto">I have virtual scrolling list with a lot of rows. I only show a few of them at a time using</p>
<p dir="auto">this.view = this.items.splice(position, position + 5)</p>
<p dir="auto">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.</p>
<h3 dir="auto">Vue.js version</h3>
<p dir="auto">2.1.3</p>
<h3 dir="auto">Reproduction Link</h3>
<p dir="auto"><a href="https://jsbin.com/netereyuxa/1/edit?html,console,output" rel="nofollow">https://jsbin.com/netereyuxa/1/edit?html,console,output</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">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.</p>
<h3 dir="auto">What is Expected?</h3>
<p dir="auto">Only one LI added, one LI removed</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">All LI's removed and added</p>