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

【问题标题】：In Vue, what is the relationship of template, render, VNode?Vue中template、render、VNode是什么关系？
【发布时间】：2019-07-26 12:32:00
【问题描述】：

在开发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(App) 中的h 是什么？
那么h的返回值是什么类型的？
模板是否总是编译为VNode 或返回VNode 的函数？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

h 与h => h(App) 是什么关系

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的返回值是什么类型的？

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

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

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

您可以选择其中任何一种，具体取决于您的实施。如果你使用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。

【讨论】：

vue 或webpack 等工具提供的实际createElement（或h）函数也是如此吗？
@EricWang 这是一个 Vue 函数。 VNode 是 Vue 的 Virtual DOM 中的一个“元素”，Vue 使用它来创建在页面上呈现的真实 HTML DOM。
好的，我找到了函数createElement()的源代码（v2.6.10）在这里：github.com/vuejs/vue/blob/…，函数_createElement()在这里：github.com/vuejs/vue/blob/…

【解决方案2】：

1) h 是 createElement 函数的别名，如本 paragraph 末尾所述。

2) h，或者更好的说法是 createElement 函数返回一个虚拟节点，或 VNode，一个常规 HTML 元素的 Vue 内部表示，如 div。您也可以在documentation 中找到更多详细信息。

3) 模板编译为您所说的相同渲染函数。 Here the details。所以基本上，模板是创建低级 VNode 的高级抽象。

【讨论】：

【解决方案3】：

这是箭头函数 - 简写版本（ES6 语法）

全功能：

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

所以h 是createElement 的别名

见：https://vuejs.org/v2/guide/render-function.html

特别是：https://vuejs.org/v2/guide/render-function.html#The-Virtual-DOM

【讨论】：