vue中render: h => h(App)的理解

render: h => h(App)

=>es6 的箭头函数语法,并不陌生。但是h代表什么呢?跟踪源码后发现:hcreateElement函数的别名,于是上面的写法等价于:

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

createElement是一个函数,以App为参数进行调用,生成一个 VNode节点。render 函数得到这个VNode节点之后,返回给 Vue.jsmount 函数,渲染成真实 DOM 节点,并挂载到根节点上。

createElement详细用法参考官网,具体示例参考 Vue中的render函数render: h => h(App)

源码中涉及到rendercreateElement比较重要的代码片段:

render

$createElement

createElement
解惑时刻

为啥将createElement别名化为h呢?翻到了尤大本人的回复:

h

来自于“hyperscript”的首字母。

于是,将h作为createElement的别名是Vue生态系统中的一个通用惯例。

推荐阅读更多精彩内容

  • 思路 1,先判断手机号和验证是否为空, 2,点击发送验证码,1分钟计时,得到验证码 3,输入的验证码是否为空和是否...
    兰觅阅读 316评论 0 1
  • 常见使用场景可以分为三类: 父子通信: 父向子传递数据是通过 props,子向父是通过 events($emit)...
    抽疯的稻草绳阅读 186评论 0 0
  • 最近在做微信小程序优惠券的一个需求,然后优惠券卡片展示是不规则图形且含阴影。 如下: 因为卡片有展开交互,所以高度...
    越前君阅读 167评论 0 3
  • 大概这样的简单官网,没有考虑ssr,接下来咱们进入正题~正式搭建。 确定你的电脑有木有vue的环境~vue cre...
    涵子_阅读 5,348评论 5 25
  • 1.Array.from():将类数组的对象和可遍历的对象转为真正的数组。let array = {'0': 'a...
    BSKSdorica阅读 334评论 0 4