在 Vue 项目中，Runtime-Only 和 Runtime + Compiler 是两种不同的构建方式。
- Runtime-Only（仅运行时）：在 Runtime-Only 构建中，Vue 库只包含运行时的代码，不包含模板编译器。。
- 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,
}
两种模式的区别
- runtime-only 省去了 template -> ast -> render 的过程
- runtime-only 比 runtime-compiler 轻 6kb，代码量更少
- runtime-only 运行更快，性能更好
- runtime-only 其实只能识别render函数，不能识别template，.vue 文件中的template也是被 vue-template-compiler 翻译成了render函数，所以只能在.vue里写 template
