vue.runtime.js V.S. vue.js
Vue 主要分为两类不同的构建版本，只包含生产环境的运行时版（vue.runtime.js）和包含生产环境和编译器的完整版（vue.js）。
编译器（compiler）是 vue.js 中内置的，可以把<div>{{n}}</div>这类模板字符串编译成为 JavaScript 渲染函数的代码。它大约占 vue.js 中40%的体积。
vue.runtime.js
在运行时版中，由于不含编译器，无法把模板字符串转译。
在这种情况下，可以通过 vue-loader，在打包项目的同时完成预编译。从而在占用更少的代码体积的情况下，实现对模板字符串的编译。
vue.runtime.js 的引入：
<script src="http://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js"></script>
因为不依靠编译器，故在运行时版中，我们只能依靠 render() 来引入视图：
new Vue({
render (h) {
return h('div', 'hi')
}
})
vue.js
在完整版中包含编译器，故而我们可以使用更为简便的方式来实现视图的引入。
Vue 编译器会把含有占位符或 v-if/v-for 的语句变为 DOM 节点。每次对 data 对象中数据的改变，都会通过 DOM 节点来实现。
vue.js 的引入：
<script src="http://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
在运行版中，我们有更多的方法实现视图的引入。
通过选择器直接从 .html 获得对应视图：
new Vue({
el: '#app'
})
通过 template 构建对应视图：
new Vue({
template: `
<div>{{n}}</div>`
})
理所当然地，完整版可以使用运行时版中的所有功能，但反之则不然。
template
template 是一个 String 类型的字符串，他可以作为 Vue 实例的标识符。
template 中的模板将会替换挂载的元素（即 el 所指向的对象）：
new Vue({
el: '#app',
template: `
<div>
100
<button>+1</button>
</div>
`,
});
如果 template 中的值以#开始，则它会被视为选择符，并使用匹配元素的 innerHTML 作为模板替换挂载的元素：
new Vue({
el: '#app',
template: '#app2',
});
render()
render() 是字符串模板的代替方案，该函数接受一个 createElement() 作为一个参数来创建 VNode：
new Vue(
render (h) {
return h('div', 'Hello World')
}
)
createElement() 的第一个参数为 tagName，第二个参数为对 DOM 对象内容的描述。
如果想嵌套创建多个元素，可以给第二个参数传入数组：
new Vue({
el: "#app",
render(h) {
return h('div', ['div', h('button', 'btn1'), h('button', 'btn2')])
}
})
通过数组的方式，我们可以实现多层元素对象的创建。
值得一提的是，render() 函数比任何 Vue 构造函数的优先级都要高。即如果存在 render() 函数，而 Vue 不会通过 template 或 el 选项指定的挂在元素作为 HTML 模板进行渲染。
