Vue中 Runtime-Only和Runtime + Compiler的区别

在 Vue 项目中，Runtime-Only 和 Runtime + Compiler 是两种不同的构建方式。

1. Runtime-Only（仅运行时）：在 Runtime-Only 构建中，Vue 库只包含运行时的代码，不包含模板编译器。。
2. Runtime + Compiler（运行时 + 编译器）：在 Runtime + Compiler 构建中，Vue 库包含运行时的代码和模板编译器。

创建项目

vue init webpack  "project-test"

创建步骤中有如下两个选项

• Runtime + Compiler
• Runtime-Only

我们分别使用这个两个方式创建项目

两个选项的内容翻译

Runtime + Compiler: recommended for most users

翻译：运行程序+编译器：推荐给大多数用户

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere

翻译：仅运行程序: 比上面那种模式轻大约 6KB，但是 template (或任何特定于vue的html)只允许在.vue文件中使用——其他地方用需要 render 函数

在项目的main.js中有如下区别

组件渲染 (Runtime + Compiler)

通过注册组件App，通过template进行渲染

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

render函数渲染 (runtime-only)

通过render函数传入组件App直接渲染

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

两种模式的流程

Vue程序的运行过程

runtime+compiler流程

template -> ast(抽象语法树) -> render函数 -> vdom(虚拟dom) -> 真实dom(界面UI)

• template 代码首先会解析成 ast（抽象语法树，abstract syntax tree）
• ast 编译成 render 函数
• render 函数变化成 vdom（虚拟dom，virtual dom）
• 把虚拟dom树渲染成真实dom ui

runtime-only流程

render函数 -> vdom(虚拟dom) -> 真实dom(UI)

• render 函数变化成 vdom（虚拟dom，virtual dom）
• 把虚拟dom树渲染成真实dom ui

大家可能会有疑问：

由render函数渲染的 .vue 文件中的 template 是怎么处理的？

是由 vue-template-compiler 编译成了render函数，这样文件中就不存在 template了

createElement函数

main.js文件

new Vue({
  render: (h) => h(app) 
  // 这里本质是createElement 函数
  // render: function (createElement) {}
}).$mount('#app')

createElement 函数介绍

createElement( ) 函数可以传三个参数：标签、属性、内容
// createElement('标签', {标签的属性}, ['内容']) 
new Vue({
  // render: h => h(App),
  render: function (createElement) {
    return createElement('h2', {class: 'box'}, ['hello,world'])
  } 
}).$mount('#app')

createElement( ) 函数高级用法，传入组件对象

const cpn = {
  template: '<h2>{{msg}}</h2>',
  data() {
    return { msg: '我是组件cpn的msg' }
  }
}

new Vue({
  render: function (createElement) {
    return createElement(cpn)
  } 
}).$mount('#app')
// 需要支持template编译模板，配置看下面

配置 支持编译 template 模板

// vue.config.js
module.exports = {
  runtimeCompiler: true,
}

两种模式的区别

1. runtime-only 省去了 template -> ast -> render 的过程
2. runtime-only 比 runtime-compiler 轻 6kb，代码量更少
3. runtime-only 运行更快，性能更好
4. runtime-only 其实只能识别render函数，不能识别template，.vue 文件中的template也是被 vue-template-compiler 翻译成了render函数，所以只能在.vue里写 template