原文链接我的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实例对象里有些什么可罗列属性：

![打印出一个新对象，对象的属性包括App对象中可罗列的属性](https://dn-mhke0kuv.qbox.me/1f4d04a9ef7c01e05904.png)
![获得效果](https://dn-mhke0kuv.qbox.me/744211eb0a867ff52b63.png)
其中有个`render`要领，因而`render`混入到了`new Vue({})`的设置中。

• 另一个值得注意的处所是：

也就是说，假如el选项在实例化时，没有作用，且没有显现挪用vm.$mount()手动开启编译时，是不会编译成render函数的，从而不会存在vnode。

编译成render函数，有实在DOM今后，插进去经由过程el选项，也许显现挪用vm.$mount()手动设置一个挂载点，挂载到DOM上。

第二个题目处理。

下一篇，我们深切源码，看看这个el与vm.$mount()在搞什么事。

完。