如何理解render: h => h(App)

学习vuejs的时候对这句代码不理解

new Vue({
    el: '#app',
    router,
    store,
    i18n,
    render: h => h(App)
})

查找了有关资料,以下为结果

render: h => h(App)

等价于

{
    render:h=>{
        return h(App);
    }
}

等价于

{
    render:function(h){
        return h(App);
    }
}

等价于

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

render:h=>h(App) 这是:

1、ES6的写法,表示Vue实例选项对象的render方法作为一个函数,接受传入的参数h函数,返回h(App)的函数调用结果

2、Vue在创建Vue实例时,通过调用render方法来渲染实例的DOM树

3、Vue在调用render方法时,会传入一个createElement函数作为参数,也就是这里的h的实参是createElement函数,然后createElement会以App为参数进行调用,关于createElement函数说明参见:

https://cn.vuejs.org/v2/guide/render-function.html#createElement-参数

官网介绍的很清楚,这样应该可以理解了。

 

posted @ 2018-10-24 09:43  大明湖畔的守望者  阅读(1520)  评论(0编辑  收藏  举报