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

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

因为,在刚开始接触vue的时候,我们这里是这样写的:
关于render: h => h(App)的解释_第1张图片

而使用了脚手架,却变成了:
关于render: h => h(App)的解释_第2张图片
不免疑惑。

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

根据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上。

你可能感兴趣的:(vue,vue.js,前端,javascript)