Vuejs 中的Runtime + Compiler 和 Runtime-only 的区别

2020-03-17 0 By admin

vue-cli 脚手架构建项目时,选择构建模式:

  1. Runtime + Compiler:运行时+编译器,推荐大多数用户。
  2. Runtime-only: 仅限运行时,要求template模板只能在vue文件中使用,其它地方使用需要加render函数。

一、Vuejs 框架组件渲染过程

组件中的页面渲染过程:

template -> ast -> render ->Vdom -> real DOM -> 页面
  1. template vue中定义的模板
  2. ast (abstract syntax tree)抽象的语法树
  3. render 函数
  4. Vdom 虚拟DOM
  5. real Dom 真实的DOM

二、render 函数介绍

vue在使用模板创建页面的时候,需要先通过一个渲染函数来创建虚拟dom树,这个函数就是render函数。
render函数内部有一个回调函数createElement(),这个函数的作用就是生成一个 VNode节点(虚拟dom),render 函数得到createElement() 创建的 VNode 节点之后,返回给 Vue.js 的 mount 函数,渲染成真实 DOM 节点,并挂载到根节点上。

三、runtime-only 模式介绍

使用runtime-only的时候,需要借助webpack的loader工具,将.vue文件编译为javascript。
因为在编译阶段已经将template模板转为ast抽线语法树,所以只包含运行时的vuejs代码,所以代码体积会更轻量。
运行的时候是不带编译的,编译是在离线的时候做的,template会通过vue-template-compiler转换为render函数使用的虚拟语法树。

四、runtime-compiler 模式介绍

在vue中,最终渲染都是通过render函数。如果写template属性,则会编译为render函数,那么这个编译过程会在运行时发生,所以需要带有编译器的版本。编译过程会对性能有一定的损耗。

五、总结

如果你需要在客户端编译模板(如:向template选项传入一个字符串,或者需要将模板中的非DOM的HTML挂载到一个元素),你需要带有编译器的版本。

在使用 vue-loader 或 vueify 时,*.vue 文件中的模板会在构建时预编译为JavaScript。最终生产的bundle不再需要编译器(compiler),因此可以直接使runtime-only的版本。

六、两个模式编写代码时的不同

在工程初始化后,两种方式的不同点在main.js 文件中。
Runtime + Compiler 方式,在Vue实例中的属性是components组件和template模板。
Runtime-only 方式,在Vue实例中属性是render,经过vue-loader 编译后,不接受template模板信息。