• 3.1 Runtime Only VS Runtime + Compiler
    • 3.1.1 Runtime + Compiler
    • 3.1.2 Runtime Only

    3.1 Runtime Only VS Runtime + Compiler

    在正文开始之前,我们先了解一下vue基于源码构建的两个版本,一个是runtime only(一个只包含运行时的版本),另一个是runtime + compiler(一个同时包含编译器和运行时的版本)。而两个版本的区别仅在于后者包含了一个编译器。

    什么是编译器,百度百科这样解释道:

    简单讲,编译器就是将“一种语言(通常为高级语言)”翻译为“另一种语言(通常为低级语言)”的程序。一个现代编译器的主要工作流程:源代码 (source code) → 预处理器 (preprocessor) → 编译器 (compiler) → 目标代码 (object code) → 链接器 (Linker) → 可执行程序 (executables)。

    通俗点讲,编译器是一个提供了将源代码转化为目标代码的工具。从Vue的角度出发,内置的编译器实现了将template模板转换编译为可执行javascript脚本的功能。

    3.1.1 Runtime + Compiler

    一个完整的Vue版本是包含编译器的,我们可以使用template进行模板编写。编译器会自动将模板字符串编译成渲染函数的代码,源码中就是render函数。如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项,或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板),就需要一个包含编译器的版本。

    1. // 需要编译器的版本
    2. new Vue({
    3. template: '<div>{{ hi }}</div>'
    4. })

    3.1.2 Runtime Only

    只包含运行时的代码拥有创建Vue实例、渲染并处理Virtual DOM等功能,基本上就是除去编译器外的完整代码。Runtime Only的适用场景有两种:1.我们在选项中通过手写render函数去定义渲染过程,这个时候并不需要包含编译器的版本便可完整执行。

    1. // 不需要编译器
    2. new Vue({
    3. render (h) {
    4. return h('div', this.hi)
    5. }
    6. })

    2.借助vue-loader这样的编译工具进行编译,当我们利用webpack进行Vue的工程化开发时,常常会利用vue-loader.vue进行编译,尽管我们也是利用template模板标签去书写代码,但是此时的Vue已经不需要利用编译器去负责模板的编译工作了,这个过程交给了插件去实现。

    很明显,编译过程对性能会造成一定的损耗,并且由于加入了编译的流程代码,Vue代码的总体积也更加庞大(运行时版本相比完整版体积要小大约 30%)。因此在实际开发中,我们需要借助像webpackvue-loader这类工具进行编译,将Vue对模板的编译阶段合并到webpack的构建流程中,这样不仅减少了生产环境代码的体积,也大大提高了运行时的性能,一举两得。