摘要：这种情况称文档碎片不过它已经有了属性。于是，第一个问题解决，真实之后，挂载到节点树上。关于第一种写法实际是的别名，也是一个通用惯例。
原文链接我的blog，欢迎STAR。
前三篇里，我们开始从render, template, el的渲染DOM树的优先级，最终都编译成render函数，而后得到vnode（虚拟DOM），经过diff算法后，得到真实DOM。
那么问题来了？得到真实DOM以后接下来该做什么？以及怎么做？
照例，分享一篇文章，vue。（官网，暂时还没有找到一篇文章能比较好的解决上述几个问题，so，我们带着问题出发，直接上官网，然后上源码。）
我们先解决第一个问题，得到真实DOM以后，接下来该做什么？
相信各位同学对原生的创建元素节点对象，一定不陌生：
const odiv = document.createElement("div"), 此时虽然已经新创建一个元素节点，但它还不是任何一颗DOM节点树的组成部分，它只是游荡在JavaScript世界里的一个孤儿。这种情况称文档碎片（document fragment）,不过它已经有了DOM属性。接下来，我们需要把新创建的元素节点插入DOM节点树，parent.appendChild(odiv)。
由此，我们猜想，是不是也要像上述中parent.appendChild(odiv)一样，插入到DOM节点树上？
官网里，有一个重要的信息：
是的，在Vue里，也需要插入到DOM节点树上，并且有一个名字挂载。
于是，第一个问题解决，真实DOM之后，挂载到DOM节点树上。
现在来解决第二个问题，该怎么挂载到DOM节点树上？
存在两种种方式（一般是在main.js文件中可以看到）：
第一种不存在el选项。
第二种存在el选项。
这有两个值得注意的地方：
细心的同学，应该已经发现上面两种方法并不只是是否存在el选项的差别，在第一个方法里，使用的是render: h => h(App), 而第二种使用的是...App。
关于第一种写法render: h => h(App),h实际是createElement的别名，也是一个通用惯例。至于=>这个是es6里面的箭头函数写法，所以换一种写法也就是(不涉及this)：
render: function (createElement) {
return createElement(App)
}
App组件最终也会编译成render函数，从而有vnode。
贴一张官网的图：
或者使用jsx时这样更容易：
- 第二种写法`...App`,这个其实也比较容易理解，`...`是es6扩展运算符，关于扩展运算符不做深入，具体的学习，可以参照阮老师写的[教程](http://es6.ruanyifeng.com/#docs/object)。在这里`...App`的意思是：取出`App`实例对象的所有可枚举属性，混入全局配置。
或许你还有点疑问，这里既没有`render`又没有`template`，如果用挂载DOM元素的HTML用作模板，那必须使用独立构建的Vue库。怎么编译的？别急，我们来看App实例对象里有些什么可枚举属性：
其中有个`render`方法，于是`render`混入到了`new Vue({})`的配置中。
另一个值得注意的地方是：
也就是说，如果el选项在实例化时，没有作用，且没有显示调用vm.$mount()手动开启编译时，是不会编译成render函数的，从而不会存在vnode。
编译成render函数，有真实DOM以后，插入通过el选项，或者显示调用vm.$mount()手动设置一个挂载点，挂载到DOM上。
第二个问题解决。
下一篇，我们深入源码，看看这个el与vm.$mount()在搞什么事。
完。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/82354.html
摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。 苏...
摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。 苏...
摘要：起初，项目使用的是，其提供的方法用着比较爽，由于项目的很多数据来自豆瓣的，直接上简单方便，跨域什么的不考虑。跨域问题，上面已经介绍，在不能操控的豆瓣数据上，使用的是。 项目地址 在线演示 不识庐山真面目，只缘身在此山中。 大概一个月前，开源了Vue重构豆瓣移动端的项目，效果还可以，收到了很多小伙伴的反馈，话说是要写一些文章的，但迟迟没有动笔，估计小伙伴们等的花都谢了，拖延症是病，需要治...
阅读 3022·2022-01-04 14:20
阅读 2932·2021-09-22 15:08
阅读 1994·2021-09-03 10:44
阅读 2184·2019-08-30 15:44
阅读 1387·2019-08-29 18:40
阅读 2564·2019-08-29 17:09
阅读 2890·2019-08-26 13:53
阅读 3141·2019-08-26 13:37
