<h3 dir="auto">Version</h3>
<p dir="auto">2.5.16</p>
<h3 dir="auto">Reproduction link</h3>
<p dir="auto"><a href="https://codepen.io/JosephSilber/pen/KeWjzr" rel="nofollow">https://codepen.io/JosephSilber/pen/KeWjzr</a></p>
<h3 dir="auto">Description</h3>
<p dir="auto">Passing content in a slot causes the component to re-render when the parent re-renders, even if the component's data hasn't changed.</p>
<h3 dir="auto">Steps to reproduce</h3>
<ol dir="auto">
<li>
<p dir="auto">Create a simple component that shows the amount of times it's been rendered:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Vue.component('times-rendered', {
    created() {
      this.timesRendered = 0
    },
    render(h) {        
      return h('div', `Times rendered: ${++this.timesRendered}`)
    }
});"><pre class="notranslate"><span class="pl-v">Vue</span><span class="pl-kos">.</span><span class="pl-en">component</span><span class="pl-kos">(</span><span class="pl-s">'times-rendered'</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
    <span class="pl-en">created</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">timesRendered</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">h</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>        
      <span class="pl-k">return</span> <span class="pl-s1">h</span><span class="pl-kos">(</span><span class="pl-s">'div'</span><span class="pl-kos">,</span> <span class="pl-s">`Times rendered: <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-c1">++</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">timesRendered</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">)</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
</li>
<li>
<p dir="auto">Use this component twice. Once with content in the default slot, once without. After the component is mounted, trigger any update to its data:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;template&gt;
    &lt;div&gt;
      &lt;div&gt;{{ updateTrigger }}&lt;/div&gt;
      &lt;times-rendered&gt;&lt;/times-rendered&gt;
      &lt;times-rendered&gt;
        Any content in the default slot causes a re-render. Why?
      &lt;/times-rendered&gt;
    &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
    data: () =&gt; ({ updateTrigger: false }),
    
    async mounted() {
      await this.$nextTick()
      
      this.updateTrigger = true
    },
};
&lt;/script&gt;"><pre class="notranslate"><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">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>{{ updateTrigger }}<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">times-rendered</span><span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">times-rendered</span><span class="pl-kos">&gt;</span>
      <span class="pl-kos">&lt;</span><span class="pl-ent">times-rendered</span><span class="pl-kos">&gt;</span>
        Any content in the default slot causes a re-render. Why?
      <span class="pl-kos">&lt;/</span><span class="pl-ent">times-rendered</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-kos">&gt;</span>

<span class="pl-kos">&lt;</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-kos">{</span>
    <span class="pl-en">data</span>: <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">updateTrigger</span>: <span class="pl-c1">false</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    
    <span class="pl-k">async</span> <span class="pl-en">mounted</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">await</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">$nextTick</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
      
      <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">updateTrigger</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span></pre></div>
</li>
</ol>
<h3 dir="auto">What is expected?</h3>
<p dir="auto">I would expect each instance of the component to only render once.</p>
<h3 dir="auto">What is actually happening?</h3>
<p dir="auto">The component with content in the slot renders twice.</p>
<hr>
<p dir="auto">I'm not actually sure whether this is a bug or a feature request. Maybe this is expected behavior currently. If it is, then I guess this would be better classified as a feature request.</p>
<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">I have developed some components that can generate large amounts of HTML, and allow content to be added via slot. It appears that if the slot content is updated, the render function is called for the component; however, this seems like something that could be avoided through optimization which would significantly improve the performance of my component in some instances.</p>
<p dir="auto">Is this possible?</p>
<h3 dir="auto">What does the proposed API look like?</h3>
<p dir="auto">Not proposing API changes.</p>