原文链接我的blog，迎接STAR。

此次想要分享的一篇文章是：从一个新鲜的毛病动身邃晓Vue的基本概念。

这篇文章以Vue的两种构建体式格局做为切入点，深入探讨了Vue的基本概念，编译以及挂载的相干历程。

在这篇文章里学到许多之前疏忽的处所:

• 最先进修vue的时刻，由于有一些react基本，对组件的情势有些相识，就直接从vue-cli最先了，疏忽了vue的两种构建形式，既是运用默许的运转时构建。

从vue官网里，能够很清晰的相识，vue存在两种构建形式，运转构建和自力构建。他们的区分在于自力构建包括模板编译，而运转构建不含模板编译。

那末题目来了，在项目那末多组件里，每一个组件都有template选项，既然运转时构建不含模板编译, 那是怎样项目是怎样运转起来，岂非我是运用了假的vue？？

来看看官网的申明：

运转时构建不含模板编译器，因而不支持template选项，只能用render选项，但纵然运用运转时构建，在单文件组件中也依旧能够写模板，由于单文件组件的模板在构建时预编译为render函数。

霎时邃晓了，原来是render函数，一个磨练JavaScript编程才能的函数，比template更靠近编译器。

那末题目又来了，render函数与template有什么关系？

• render 函数、 template 属性以及 el属性。

分享的这篇文章有一点总结的很好：

当Vue选项对象中有render衬着函数时，Vue组织函数将直接运用衬着函数衬着DOM树，当选项对象中没有render衬着函数时，Vue组织函数起首经由过程将template模板天生render函数，然后再衬着DOM树，而当选项对象中既没有render衬着函数，也没有template模板时，会经由过程el属性猎取挂载元素的outerHTML来作为模板，并编译天生衬着函数。

素昧平生的几句话……

Vue官网API搜刮template：

这里末了一句话，假如Vue选项中包括render函数，template选项将被疏忽，也就是说在衬着DOM树时render函数的优先级 大于 template选项。

意义也是在举行DOM衬着的时刻，render函数优先级最高，template和el次之。

来看 el：

这里有一个小知识点被疏忽： 在实例挂载以后，元素能够用vm.$el接见（脑补会用到的场景中。。。）

末了一条信息里：

假如render函数和template属性都不存在，挂在DOM元素的HTML会被提取出来用作模板，此时，必需运用Runtime + Compiler构建的Vue库。

也就是说： 在举行DOM树衬着时，render衬着函数的优先级最高，template次之且须要编译成衬着函数，在前二者均不存在时，挂载DOM元素的outerHTML会被提取出来用作模板。

固然，构建Vue实例时，能够不含有render, template, el三者中任何一个。