当我们第一次安装完脚手架,打开 的时候,我相信,一定有小伙伴和我一样,看到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上。