关于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 (createElement) {
    return createElement(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 
————————————————
版权声明：本文为CSDN博主「学霸的男人」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_40938301/article/details/104342113