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应该称为什么?有点晕乎,哪位大神可以帮忙屡一下思路。感谢

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 7月,女儿突然打电话回来说要回家一趟。自从她嫁人后,每年过年才回家住上几天,就又跟着姑爷匆匆出外谋生。但在农村,过...
    虫儿姐阅读 2,905评论 0 2
  • 每个人都会有自己的朋友圈,或大或小,朋友圈里的人也有轻有重,而我,不仅仅想做你朋友圈里的一员,更想做你最在乎最重要...
    君莫卿阅读 3,754评论 0 0
  • 离得太远了,关系就淡了;可靠得太近了,恩恩怨怨就来了。 不管是家人朋友,还是同学同事,好起来时可以两人...
    925a17501b0c阅读 1,751评论 0 1
  • 今天更新时打包出现了这两个错误。 1.第2个警告,是由于刚升级的xcode最新版本,没有适配iphone X的尺寸...
    Medley_阅读 4,077评论 0 0
  • 趁早APP“21个高效工作小技巧”中知道了Grace,当时坚持完成21天打卡,实话说其中的很多思想、理念并不明白,...
    木棉子兮阅读 5,004评论 1 5

友情链接更多精彩内容