title: In Vue, what is the relationship of template, render, VNode?
body: <p>During development of a vue project, and got some doubt regarding <code>template</code> / <code>render</code> / <code>VNode</code>.</p>
  <p>After reading the document <a href="https://v2.vuejs.org/v2/guide/syntax.html" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/syntax.html</a>, and google search, still didn't understand it well.</p>
  <hr />
  <h2>Code</h2>
  <p><strong>main.js:</strong> <em>(partly)</em></p>
  <pre><code>new Vue({
    el: '#app',
    render: h =&gt; h(App),
    router
  })
  </code></pre>
  <p><strong>App.vue:</strong></p>
  <pre><code>&lt;template&gt;
    &lt;div id=&quot;content&quot;&gt;
      &lt;!--    &lt;img src=&quot;./assets/logo.png&quot; alt=&quot;&quot;&gt;--&gt;
      &lt;router-view&gt;&lt;/router-view&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {}
  &lt;/script&gt;
  </code></pre>
  <hr />
  <h2>Questions</h2>
  <ul>
  <li>What is <code>h</code> from <code>h =&gt; h(App)</code> ?</li>
  <li>And what is the type of <code>h</code>'s return value?</li>
  <li>Does the template always compile to a <code>VNode</code> or a function that returns a <code>VNode</code>?</li>
  </ul>