vue Render：h=>h(App) 解析

在学习VUE时，发现很多的组件的引入都是用ES6，需要在main.js中写入如下代码：

export default () => {
  const router = createRouter()
  const store = createStore()

  const app = new Vue({
    router,
    store,
    render: h => h(App)
  })

  return { app, router, store }
}

其中对 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-参数