<h3 dir="auto">Version</h3>
<p dir="auto">2.6.11</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://codesandbox.io/s/focused-paper-3cqr1?file=/src/App.vue" rel="nofollow">https://codesandbox.io/s/focused-paper-3cqr1?file=/src/App.vue</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<ol dir="auto">
<li>Write the Vue code as below.</li>
</ol>
<div class="highlight highlight-text-html-vue notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;template&gt;
  &lt;div id=&quot;app&quot;&gt;
    &lt;template v-for=&quot;item in array&quot;&gt;
      &lt;p :key=&quot;item&quot; ref=&quot;test&quot;&gt;{{ item }}&lt;/p&gt;
    &lt;/template&gt;
    &lt;button type=&quot;button&quot; @click=&quot;log&quot;&gt;Log&lt;/button&gt;
    &lt;button type=&quot;button&quot; @click=&quot;reorder&quot;&gt;Reorder&lt;/button&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  name: &quot;App&quot;,
  data() {
    return { array: [1, 2, 3] };
  },
  methods: {
    log() {
      console.log(this.$refs.test.map((el) =&gt; el.getBoundingClientRect().top));
    },
    reorder() {
      this.array = [2, 1, 3];
    },
  },
};
&lt;/script&gt;"><pre class="notranslate">&lt;<span class="pl-ent">template</span>&gt;
  &lt;<span class="pl-ent">div</span> <span class="pl-e">id</span>=<span class="pl-s"><span class="pl-pds">"</span>app<span class="pl-pds">"</span></span>&gt;
    &lt;<span class="pl-ent">template</span> <span class="pl-e">v-for</span>=<span class="pl-s1"><span class="pl-pds">"</span>item <span class="pl-k">in</span> array<span class="pl-pds">"</span></span>&gt;
      &lt;<span class="pl-ent">p</span> :<span class="pl-e">key</span>=<span class="pl-s1"><span class="pl-pds">"</span>item<span class="pl-pds">"</span></span> <span class="pl-e">ref</span>=<span class="pl-s"><span class="pl-pds">"</span>test<span class="pl-pds">"</span></span>&gt;{{ item }}&lt;/<span class="pl-ent">p</span>&gt;
    &lt;/<span class="pl-ent">template</span>&gt;
    &lt;<span class="pl-ent">button</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>button<span class="pl-pds">"</span></span> @<span class="pl-e">click</span>=<span class="pl-s1"><span class="pl-pds">"</span>log<span class="pl-pds">"</span></span>&gt;Log&lt;/<span class="pl-ent">button</span>&gt;
    &lt;<span class="pl-ent">button</span> <span class="pl-e">type</span>=<span class="pl-s"><span class="pl-pds">"</span>button<span class="pl-pds">"</span></span> @<span class="pl-e">click</span>=<span class="pl-s1"><span class="pl-pds">"</span>reorder<span class="pl-pds">"</span></span>&gt;Reorder&lt;/<span class="pl-ent">button</span>&gt;
  &lt;/<span class="pl-ent">div</span>&gt;
&lt;/<span class="pl-ent">template</span>&gt;

<span class="pl-s1">&lt;<span class="pl-ent">script</span>&gt;</span>
<span class="pl-s1"><span class="pl-k">export</span> <span class="pl-c1">default</span> {</span>
<span class="pl-s1">  name<span class="pl-k">:</span> <span class="pl-s"><span class="pl-pds">"</span>App<span class="pl-pds">"</span></span>,</span>
<span class="pl-s1">  <span class="pl-en">data</span>() {</span>
<span class="pl-s1">    <span class="pl-k">return</span> { array<span class="pl-k">:</span> [<span class="pl-c1">1</span>, <span class="pl-c1">2</span>, <span class="pl-c1">3</span>] };</span>
<span class="pl-s1">  },</span>
<span class="pl-s1">  methods<span class="pl-k">:</span> {</span>
<span class="pl-s1">    <span class="pl-en">log</span>() {</span>
<span class="pl-s1">      <span class="pl-en">console</span>.<span class="pl-c1">log</span>(<span class="pl-c1">this</span>.<span class="pl-smi">$refs</span>.<span class="pl-smi">test</span>.<span class="pl-en">map</span>((<span class="pl-smi">el</span>) <span class="pl-k">=&gt;</span> <span class="pl-smi">el</span>.<span class="pl-c1">getBoundingClientRect</span>().<span class="pl-c1">top</span>));</span>
<span class="pl-s1">    },</span>
<span class="pl-s1">    <span class="pl-en">reorder</span>() {</span>
<span class="pl-s1">      <span class="pl-c1">this</span>.<span class="pl-smi">array</span> <span class="pl-k">=</span> [<span class="pl-c1">2</span>, <span class="pl-c1">1</span>, <span class="pl-c1">3</span>];</span>
<span class="pl-s1">    },</span>
<span class="pl-s1">  },</span>
<span class="pl-s1">};</span>
<span class="pl-s1">&lt;/<span class="pl-ent">script</span>&gt;</span></pre></div>
<ol start="2" dir="auto">
<li>
<p dir="auto">Call the <code class="notranslate">reorder()</code> method.</p>
</li>
<li>
<p dir="auto">Call the <code class="notranslate">log()</code> method after re-rendering.</p>
</li>
</ol>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">An array is logged whose elements are in the order in which the corresponding elements appear in the document.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">The logged array keeps the original order.</p>
<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">in vue.js 2.0 ,we can return more then one VNode in render fucntion,but it's not support in template,even if we use "functional" in :<br>
for examples:</p><p dir="auto"></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;script&gt;
export default {
  functional: true,
  render(createElement, context) {
    const arr = context.scopedSlots.default()
    const suffix = createElement('span', 123)
    arr.push(suffix)
    return arr
  }
}
&lt;/script&gt;"><pre class="notranslate"><code class="notranslate">&lt;script&gt;
export default {
  functional: true,
  render(createElement, context) {
    const arr = context.scopedSlots.default()
    const suffix = createElement('span', 123)
    arr.push(suffix)
    return arr
  }
}
&lt;/script&gt;
</code></pre></div>
<p dir="auto">this is OK!</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;template functional&gt;
  &lt;slot&gt;&lt;/slot&gt;
  &lt;span&gt;123&lt;/span&gt;
&lt;/template&gt;
&lt;script&gt;
export default {

}
&lt;/script&gt;"><pre class="notranslate"><code class="notranslate">&lt;template functional&gt;
  &lt;slot&gt;&lt;/slot&gt;
  &lt;span&gt;123&lt;/span&gt;
&lt;/template&gt;
&lt;script&gt;
export default {

}
&lt;/script&gt;
</code></pre></div>
<p dir="auto">but this is not OK!<br>
 should be consistent with render function if "functional" is an attr in 
</p><h3 dir="auto">What does the proposed API look like?</h3>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;template functional&gt;
  &lt;slot&gt;&lt;/slot&gt;
  &lt;span&gt;123&lt;/span&gt;
&lt;/template&gt;"><pre class="notranslate"><code class="notranslate">&lt;template functional&gt;
  &lt;slot&gt;&lt;/slot&gt;
  &lt;span&gt;123&lt;/span&gt;
&lt;/template&gt;
</code></pre></div>
<p></p><p></p>