VUE程序运行过程-runtime-complier和runtime-only的区别

1.VUE程序运行过程

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

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

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

将虚拟DOM渲染成真实的DOM

2. Vue的开发过程中我们有三种方式来编写DOM元素：

• 方式一：template模板的方式（之前经常使用的方式）；
• 方式二：render函数的方式，使用h函数来编写渲染的内容；
• 方式三：通过.vue文件中的template来编写模板；

这三种模板分别怎么处理呢？

• 方式二中的h函数可以直接返回一个虚拟节点，也就是Vnode节点；
• 方式一和方式三的template都需要有特定的代码来对其进行解析：
• 方式三.vue文件中的template可以通过在vue-loader对其进行编译和处理；
• 方式一种的template我们必须要通过源码中一部分代码来进行编译；

所以，Vue在让我们选择版本的时候分为 运行时+编译器 vs 仅运行时

• 运行时+编译器（Runtime-Compiler）包含了对template模板的编译代码，更加完整，但是也更大一些；
• 仅运行时（Runtime-only）没有包含对template版本的编译代码，相对更小一些；

二.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 性能更高，代码量更小