现在的位置: 首页 > web前端 > 正文

Vue中的 render h 含义

2020年07月16日 web前端 ⁄ 共 974字 ⁄ 字号 评论关闭

  关于Vue中的render:h=>h(App)具体是什么含义?


  render:h是什么意思


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


  render:function(createElement){


  returncreateElement(App);


  }


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


  render(createElement){


  returncreateElement(App);


  }


  再进一步缩写为:


  render(h){


  returnh(App);


  }


  按照ES6箭头函数的写法,就得到了:


  render:h=>h(App);


  h的含义如下:


  Itcomesfromtheterm"hyperscript",whichiscommonlyusedinmanyvirtual-domimplementations."Hyperscript"itselfstandsfor"scriptthatgeneratesHTMLstructures"becauseHTMListheacronymfor"hyper-textmarkuplanguage".


  它来自单词hyperscript,这个单词通常用在virtual-dom的实现中。Hyperscript本身是指


  生成HTML结构的script脚本,因为HTML是hyper-textmarkuplanguage的缩写(超文本标记语言)


  理解:createElement函数是用来生成HTMLDOM元素的,也就是上文中的generateHTMLstructures,也就是Hyperscript,这样作者才把createElement简写成h。


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


  还有另外一种写法效果是一样的:


  importAppfrom'./App'


  newVue({


  el:'#root',


  template:'<App></App>',


  components:{


  App


  }


  })


  总之,h的含义给大家简单的介绍了一些,希望大家多看看。

抱歉!评论已关闭.