Vue中，template、render、VNode是什么关系？

在开发vue项目的过程中，遇到一些疑问template / render / VNode.

阅读文档后https://v2.vuejs.org/v2/guide/syntax.html https://v2.vuejs.org/v2/guide/syntax.html，又google了一番，还是不太明白。

Code

main.js: (partly)

new Vue({
  el: '#app',
  render: h => h(App),
  router
})

App.vue:

<template>
  <div id="content">
    <!--    <img src="./assets/logo.png" alt="">-->
    <router-view></router-view>
  </div>
</template>

<script>
  export default {}
</script>

问题

• What is h from h => h(App) ?
• 以及什么类型的h的返回值？
• 模板是否总是编译为VNode或返回一个函数VNode?

What is h from h => h(App)

render: h => h(App)是以下形式的简写：

render: function (createElement) {
    return createElement(App);
}

where h是简写createElement争论;将模板编译成 VNode 的函数

https://github.com/vuejs-templates/webpack-simple/issues/29#issuecomment-312902539 https://github.com/vuejs-templates/webpack-simple/issues/29#issuecomment-312902539

是什么类型的h的返回值？

Since h is the createElement功能，h这里返回一个VNode

https://v2.vuejs.org/v2/guide/render-function.html#createElement-Arguments https://v2.vuejs.org/v2/guide/render-function.html#createElement-Arguments

模板是否总是编译为 VNode 或返回的函数 一个虚拟节点

您可以执行任一操作，具体取决于您的实现。如果你使用Vue.compile，然后你可以将模板编译成渲染函数：

var res = Vue.compile('<div><span>{{ msg }}</span></div>')

new Vue({
  data: {
    msg: 'hello'
  },
  render: res.render,
  staticRenderFns: res.staticRenderFns
})

https://v2.vuejs.org/v2/api/#Vue-compile https://v2.vuejs.org/v2/api/#Vue-compile

如果您使用createElement函数，然后将模板直接编译成VNode。