render函数

学习vue的时候，遇到render这个函数，看着一脸懵逼的不知道是什么意思，通过看官网和别人的一些帖子
大概知道是一个什么样的效果，但是其中的深沉原理还是不太清楚

通常我们看到一般都是这样写的

new Vue({
  el:'#app',
  render:h=>h(App)
})
这种是es6的写法，以下是普通写法

render:function(createElement){
    return createElement(App)
},
render函数传入的是一个createElement参数，App作为createElement的参数（渲染模板），下面的解释是官网提供的

image.png

createElement 到底会返回什么呢？其实不是一个实际的 DOM 元素。它更准确的名字可能是 
createNodeDescription，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，及其子节点。我们
把这样的节点描述为“虚拟节点 (Virtual Node)”，也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树
建立起来的整个 VNode 树的称呼。

还有更简洁的实现方法
 compoments:{
   App
 },
template:"<App/>"
App作为一个组件，并把他作为template渲染模板，挂载到el上

无论是哪种方法，反正就是把App这个模板挂载到el上。
各位大神，我还有一个很迷惑的地方，就是main.js文件创建vue实例的时候，el:"#app"这个#app 是index.html中的app节点，他是如果获取到的呢？main.js是入口文件，那index.html应该称为什么？有点晕乎，哪位大神可以帮忙屡一下思路。感谢