南京大型门户网站制作百度浏览器官网

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

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

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

不免疑惑。

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

根据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函数

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