<h3 dir="auto">Version</h3>
<p dir="auto">2.6.10</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://codepen.io/xiangyuecn/pen/eYmmPNP" rel="nofollow">https://codepen.io/xiangyuecn/pen/eYmmPNP</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<ol dir="auto">
<li>Look at the <a href="https://codepen.io/xiangyuecn/pen/eYmmPNP" rel="nofollow">test code</a> running interface. <code class="notranslate">OnceMsg</code>  area should have been static, but it is not!</li>
<li>Look at the <code class="notranslate">Test 3</code> part of the <a href="https://codepen.io/xiangyuecn/pen/eYmmPNP" rel="nofollow">test code</a>. It's exactly the same as the <code class="notranslate">Test 2</code> part, but their performance is not the same.</li>
<li>Similar to this kind of code, they are the same, but the results are different:</li>
</ol>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div&gt;
	&lt;template v-once&gt;[{{ getTime() }}] {{ name }}&lt;/template&gt;
	&lt;span v-once&gt;[{{ getTime() }}] {{ name }}&lt;/span&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
	<span class="pl-kos">&lt;</span><span class="pl-ent">template</span> <span class="pl-c1">v-once</span><span class="pl-kos">&gt;</span>[{{ getTime() }}] {{ name }}<span class="pl-kos">&lt;/</span><span class="pl-ent">template</span><span class="pl-kos">&gt;</span>
	<span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">v-once</span><span class="pl-kos">&gt;</span>[{{ getTime() }}] {{ name }}<span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;div v-for=&quot;obj,idx in logs&quot; :key=&quot;idx&quot;&gt;
	&lt;div&gt;
		&lt;template v-once&gt;[{{ getTime() }}] {{ obj.msg }}&lt;/template&gt;
		&lt;span v-once&gt;[{{ getTime() }}] {{ obj.msg }}&lt;/span&gt;
	&lt;/div&gt;
&lt;/div&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">v-for</span>="<span class="pl-s">obj,idx in logs</span>" <span class="pl-c1">:key</span>="<span class="pl-s">idx</span>"<span class="pl-kos">&gt;</span>
	<span class="pl-kos">&lt;</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
		<span class="pl-kos">&lt;</span><span class="pl-ent">template</span> <span class="pl-c1">v-once</span><span class="pl-kos">&gt;</span>[{{ getTime() }}] {{ obj.msg }}<span class="pl-kos">&lt;/</span><span class="pl-ent">template</span><span class="pl-kos">&gt;</span>
		<span class="pl-kos">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">v-once</span><span class="pl-kos">&gt;</span>[{{ getTime() }}] {{ obj.msg }}<span class="pl-kos">&lt;/</span><span class="pl-ent">span</span><span class="pl-kos">&gt;</span>
	<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span></pre></div>
<blockquote>
<p dir="auto"><em>Use <code class="notranslate">&lt;template v-once&gt;</code> because I don't want to use more than one <code class="notranslate">span</code>, which will damage the DOM structure.</em></p>
</blockquote>
<h3 dir="auto">What is expected?</h3>
<p dir="auto"><code class="notranslate">&lt;template v-once&gt; in v-for</code> should be consistent with <code class="notranslate">&lt;template v-once&gt; not in v-for</code>, <code class="notranslate">OnceMsg</code>  area should have been static.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto"><code class="notranslate">&lt;template v-once&gt; in v-for</code> and <code class="notranslate">&lt;template v-once&gt; not in v-for</code> are inconsistent, The leftmost time of <code class="notranslate">OnceMsg</code> area will change with the cycle.</p>
<h3 dir="auto">Version</h3>
<p dir="auto">2.5.16</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://jsfiddle.net/hL0rrbs9/6/" rel="nofollow">https://jsfiddle.net/hL0rrbs9/6/</a></p>
<h3 dir="auto">Steps to reproduce</h3>
<p dir="auto">Run code, and watch.</p>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">"Yay Yay ;)" values should not change to "hell naw!" in 3 seconds.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">"Yay Yay ;)" values are changing in to "hell naw!" in 3 seconds.</p>
<hr>
<h2 dir="auto">
  Wait 3 seconds. Behavior is not consistent. "component" tag in v-for should not change. 
</h2>
<div id="user-content-app" dir="auto">
  
  <p dir="auto">{{comp}}</p>
  <div dir="auto">
    
    <p dir="auto">{{comp}}</p>
  </div>
</div>
&lt;script&gt;
var z = new Vue({
	el: "#app",
  data: {
  	comp:	"comp1",
    items: [{id:1}, {id:2}]
  },
  components: {
  	"comp1": {
    	template: "<p dir="auto">yay yay ;)</p>"
    },
  	"comp2": {
    	template: "<p dir="auto">hell naw!</p>"
    }
  }
});
<p dir="auto">setTimeout(function() {<br>
z.comp = "comp2"<br>
}, 3000);<br>
&lt;/script&gt;</p>