render: h => h(App)
=>
是es6
的箭头函数语法,并不陌生。但是h
代表什么呢?跟踪源码后发现:h
是createElement
函数的别名,于是上面的写法等价于:
render:function(createElement){
return creatElemnt(App);
}
createElement
是一个函数,以App
为参数进行调用,生成一个 VNode
节点。render
函数得到这个VNode
节点之后,返回给 Vue.js
的 mount
函数,渲染成真实 DOM
节点,并挂载到根节点上。
createElement
详细用法参考官网,具体示例参考 Vue中的render函数render: h => h(App)。
源码中涉及到render
及createElement
比较重要的代码片段:
$createElement createElement
解惑时刻
为啥将createElement
别名化为h
呢?翻到了尤大本人的回复:
来自于“hyperscript”的首字母。
于是,将h
作为createElement
的别名是Vue
生态系统中的一个通用惯例。
网友评论