用vue cli2 新建2个项目，一个使用runtime-compiler,一个使用runtime-only，创建时选项：

 

 

创建后的项目对比main.js文件之间的区别：

 

 runtime-compiler方式生成的文件main.js中有模板和注册组件。

runtime-only方式生成的文件main.js中模板。

 

1.runtime-compiler的Vue程序运行链条：

vm.options.template ------parse----> ast---------compile------------>vm.options.render(functions)-------render------->virtual Dom(虚拟Dom）--------update(diff and patch)------>UI

原理：如果vue中有模板template，vue则会将其解析成ast（抽象语法树）,然后在将ast编译后给到render渲染函数,渲染成虚拟DOM,最后更新到UI页面。

 

2.runtime-only的模式,vue程序运行链条：

vm.options.render(functions)-------render------->virtual Dom(虚拟Dom）--------update(diff and patch)------>UI

 

render: h=>h(App)是箭头函数，相当于

render: function(h){

　　return h(App)

}

 

 3. h实际上是一个createElement函数，它可以创建页面DOM

 

 

 1 new Vue({
 2   el: '#app',
 3   // components: { App },
 4   // template: '<App/>'
 5   render:function(createElement){
 6     // 1.createElement('标签',{标签属性},[标签内容,子标签])
 7     return createElement('h2',{class:'box'},['hello render'])
 8 
 9   }
10 })

以上代码就是取代(覆盖)了index.html页面默认的<div id='app'></div>，而改成<h2>hello render</h2>

 

 4.在h2标签内部还可以创建字标签button

 1 new Vue({
 2   el: '#app',
 3   // components: { App },
 4   // template: '<App/>'
 5   render:function(createElement){
 6     // 1.createElement('标签',{标签属性},[标签内容,子标签])
 7     return createElement(
 8       'h2',
 9       {class:'box'},
10       ['hello render',
11         createElement('button',['按钮'])
12       ]
13     )
14   }
15 })

 

 

 

 

 

由此论证，render:h=>h(App)是不需要在main.js中使用模板的。

 

5.除了以上方式还有另一种方式，即定义组件后，直接放置到render函数中，来创建组件。

 1 // The Vue build version to load with the `import` command
 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 import Vue from 'vue'
 4 import App from './App'
 5 
 6 Vue.config.productionTip = false
 7 const cpn = {
 8   template:`
 9   <div>我是组件:{{message}}</div>
10   `,
11   data(){
12     return{
13       message:"我是CPN"
14     }
15   }
16 }
17 
18 /* eslint-disable no-new */
19 new Vue({
20   el: '#app',
21   // 方式0：
22   // components: { App },
23   // template: '<App/>'
24   // 方式1:使用render函数
25   render:function(createElement){
26     // 1.createElement('标签',{标签属性},[标签内容,子标签])
27     // return createElement(
28     //   'h2',
29     //   {class:'box'},
30     //   ['hello render',
31     //     createElement('button',['按钮'])
32     //   ]
33     // )
34     // 方式2:使用组件方式
35     return createElement(cpn)
36   }
37 })

同样可以渲染成前端UI

 

 

因此，在这一步中就没有template需要编译了。

 

6.对于runtime-compiler能解析template的底层支撑是安装了组件：

vue-template-compiler

npm install vue-loader vue-template-compiler --save-dev