美文网首页Web前端之路
vue中render: h => h(App)的理解

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

作者: 嘻哈章鱼小丸子 | 来源:发表于2020-11-04 10:22 被阅读0次
    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生态系统中的一个通用惯例。

    相关文章

      网友评论

        本文标题:vue中render: h => h(App)的理解

        本文链接:https://www.haomeiwen.com/subject/kscivktx.html