关于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 

发布了57 篇原创文章 · 获赞 12 · 访问量 8万+

猜你喜欢

转载自blog.csdn.net/qq_40938301/article/details/104342113