关于render: h =＞ h(App)的解释

当我们第一次安装完脚手架，打开 的时候，我相信，一定有小伙伴和我一样，看到main.js里面的render: h => h(App),感觉懵懵的。

因为，在刚开始接触vue的时候，我们这里是这样写的：

    <script> 
  			new Vue({
            el:'#root'
        })
    </script>

而使用了脚手架，却变成了：

new Vue({
  render: h => h(App)
}).$mount('#app')

不免疑惑。

所以查了一些资料，了解了一下，做个备忘。

根据es6语法，逐步还原：

render: h => h(App);

等价于

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

等价于

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

等价于

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

那什么是Render函数呢，官方文档是这么说的：

render函数是组件渲染的重要核心，它跟template模板开发一样，只不过这种形式开发，它(render)更接近底层，这样能让Vue编译时少转换一次，用于生成一个虚拟的网页节点。

render函数返回值是一个VNode -> "virtual node"虚拟节点

render函数的参数是一个createElement函数

而且，此时，我们把 render: h => h(App)替换为我们熟悉的el:'#root',会得到一个报错，即：你使用了一个阉割版的vue,不含有渲染器render,这样就有了答案了。

这么一看，也就明白了，返回的虚拟节点，通过钩子$mount('#app')挂载到了主页面的#app上。