javascript - 在Vue中，模板，渲染，VNode之间是什么关系？

在开发Vue项目期间，对template / render / VNode产生了一些疑问。

在阅读了https://vuejs.org/v2/guide/syntax.html文档和google搜索之后，仍然不太了解。

码

main.js:(部分)

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>

问题

h中的h => h(App)是什么？

h的返回值是什么类型？

模板是否总是编译为VNode或返回VNode的函数？

最佳答案

render: h => h(App)是以下内容的缩写:

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

其中h是createElement参数的简写；将模板编译成VNode的功能

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



由于h是createElement函数，h在这里返回一个VNode

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



您可以执行任一操作，仅取决于您的实现。如果使用Vue.compile，则可以将模板编译为渲染函数:

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

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

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

如果使用createElement函数，则可以将模板直接编译到VNode中。