一.VUE程序运行过程

当把template传递给vue实例的时候，vue实例会把该模板内容保存到vm.options，

然后对该template解析成ast(抽象语法树)

将ast编译为render()函数，通过render函数翻译成虚拟DOM

将虚拟DOM渲染成真实的DOM

二.Runtime-Compiler和Runtime-only

1.Runtime-Compiler：

选择Runtime-Compiler创建的项目main.js：

import Vue from 'vue'
import App from './App'Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({el: '#app',conponents:{App},template:'</App>'
})

解析一个template的过程：

template-ast-render()-虚拟DOM-真实DOM

2.Runtime-only解析VUE组件的过程：

选择Runtime-only创建的项目main.js：

import Vue from 'vue'
import App from './App'Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',render: function (h) {return h(App)}
})

render()-虚拟DOM-真实DOM

3.render()函数详解：

h:在render()函数内部是调用createElement('标签'，{标签的属性}，[标签内的内容])，

• createElement()普通用法：

new Vue({el: '#app',// render: h => h(App)function render(createElement){return createElement('<>h2</>'，{clsaa:'box'},['helloworld',createElement('button'),['添加']])})
})

第一个参数是一个标签，将创建出来的标签替换index.html中id=app的div标签

第二个参数是对象，标签的属性

第三个参数是数组，标签里面的内容，里面还可以创建新的标签

• createElement()传入组件用法：

import Vue from 'vue'
import App from './App'Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',render: function (h) {return h(App)}
})

createElement()也可以以vue组件作为参数，将组件对应的内容替换 index.html中id=app的div标签

这种方式解析vue代码的时候，只有render()-虚拟DOM-真实DOM三个步骤

import Vue from 'vue'
import App from './App'Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({el: '#app',components:{App},template:'<App></App>'
})

相比于在vue实例中注册组件,再将组件传入template中，解析template需要5个步骤：

template-ast-render()-虚拟DOM-真实DOM

4.vue文件中的template是由谁处理的呢？

为什么App.vue中有template,但是不需要template-ast，可以直接被render()函数编译呢？

vue-loader和vue-template-complier

vue-loader:加载vue文件

vue-template-complier：将vue文件中的template解析成render()函数

因此，在main.js中导入的App里面已经不包含template

项目中所有的vue文件通过vue-template-complier解析过后都不包含template,因此只需要runtime-only

5.Runtime-Compiler和Runtime-only的比较

runtime-only 性能更高，代码量更小