el、template、render、mount具体用法和优先级

el、template、render、mount四者混在一起的时候，有种乱乱的感觉，本文努力说清楚。

先说几个专业名词：

• 编译：将模板字符串 生成 Dom。<div>1</div>这样只是模板字符串，只有createElement('div')这才是Dom。
• 挂载元素：想象成一个占位，Vue 生成的 DOM 之后覆盖在这个元素上，注意，这个元素是会被干掉的，所以挂载元素不能是html或者body

开始可能Vue官方教程更重要，后期多看Vue官方API文档，这里有更多，你撸码时能用到的操作。以下，很多是文档里整理的。

TL;DR

• 优先级：render > template > el 或 $mount。没有render的时候，template 或 el 最终都会变成 render 函数。
• $mount的好处：可以先编译，然后想什么时候挂载就什么时候挂载

el

用法：new Vue({el:'#app'})

• 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载元素，其会被 Vue 生成的 DOM 替换。
  
• 在实例挂载之后，元素可以用 vm.$el 访问。
  
• 如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 vm.$mount()，手动开启编译。
  
• 如果 render 函数和 template 属性都不存在，挂载 DOM 元素的 HTML 会被提取出来用作模板。
  

template

用法：new Vue({template:"<div>{{msg}}</div>"})

• 一个字符串模板。模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发插槽。
• 如果值以 # 开始，则它将被用作选择符，并使用匹配元素的 innerHTML 作为模板。常用的技巧是用 <script type="x-template">包含模板。
• 如果 render 函数存在，该模板将被忽略。

render

用法：new Vue({render(createElement){return createElement('div','hello') }})

• 字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。
  
• 如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。
  
• render 函数若存在，将直接作为模板编译，而完全无视template或el挂载元素中提取出的 HTML 模板。
  

mount

用法：

• new Vue({...}).$mount('#app')
  
• var vm = new Vue({...}).$mount(); document.body.appendChild(vm.$el)
  
• 如果实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
  
• 如果没有提供参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API把它插入文档中。
  

大致图

官网生命周期图: