关于Vue中 render: h => h(App) 的具体含义的理解

ps: 如果有任何问题可以评论留言，我看到后会及时解答，评论或关注，您的鼓励是我分享的最大动力

转载请注明出处：

https://blog.csdn.net/qq_40938301/article/details/104342113

一、问题：

https://github.com/vuejs-templates/webpack-simple/blob/master/template/src/main.js

import Vue from 'vue'
import App from './App.vue'

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

vue的代码中有这么一段，令人第一眼对这个 h 函数十分困惑？？

二、原因：

经过查找相关资料后发现：

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

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

进一步缩写为(ES6 语法)：

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

再进一步缩写为：

render (h){
    return h(App);
}

按照 ES6 箭头函数的写法，就得到了：

render: h => h(App);

其中 根据 Vue.js 作者 Even You 在 Vue 的 issue 中的回复，h 的含义如下：

It comes from the term "hyperscript", which is commonly used in many virtual-dom implementations. "Hyperscript" itself stands for "script that generates HTML structures" because HTML is the acronym for "hyper-text markup language".

它来自单词 hyperscript，这个单词通常用在 virtual-dom 的实现中。Hyperscript 本身是指 
生成HTML 结构的 script 脚本，因为 HTML 是 hyper-text markup language 的缩写（超文本标记语言）

三、总结：

h 函数的本质是createElement 函数，这个函数的作用就是生成一个 VNode节点，render 函数得到这个 VNode 节点之后，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上

而之所以要 叫 h，根据作者解释是，来源于 hyper script，

........

个人觉得可读性差了很多，就算是外国人不经解释也很难理解这个 h 函数

不如直接 createElement