乐趣区

关于vue.js:Runtime-Only-VS-Runtime-Compiler

通常咱们利用 vue-cli 去初始化咱们的 Vue.js 我的项目的时候会询问咱们用 Runtime Only 版本的还是 Runtime + Compiler 版本。上面咱们来比照这两个版本。

  • Runtime Only

咱们在应用 Runtime Only 版本的 Vue.js 的时候,通常须要借助如 webpack 的 vue-loader 工具把 .vue 文件编译成 JavaScript,因为是在编译阶段做的,所以它只蕴含运行时的 Vue.js 代码,因而代码体积也会更轻量。

Runtime Only 版本艰深来说也就是公布到浏览器的时候并不存在 template 版本。是浏览器能够辨认的 render 函数。
咱们平时 SPA 应用 webpack 进行打包的代码其实就是 runtime-only 代码,vue 会帮咱们把 template 编译成 render 函数模式的出现。
简而言之,runtime Only 版本是运行时不做编译,编译是在离线的时候做(打包时候进行编译)。

  • Runtime + Compiler

咱们如果没有对代码做预编译,但又应用了 Vue 的 template 属性并传入一个字符串,则须要在客户端编译模板

compiler 就是应用的 vue 版本在公布的时候能够应用 template 标签,vue 会在运行的时候辨认这些 template 标签并帮忙咱们转化为 render 函数。
也就是 vue 在运行的时候,留神是 vue 运行的时候 vue 帮咱们进行编译。
,如下所示:

// 须要编译器的版本
new Vue({template: '<div>{{ hi}}</div>'
})

// 这种状况不须要
new Vue({render (h) {return h('div', this.hi)
  }
})

因为在 Vue.js 2.0 中,最终渲染都是通过 render 函数,如果写 template 属性,则须要编译成 render 函数,那么这个编译过程会产生运行时,所以须要带有编译器的版本。

很显然,这个编译过程对性能会有肯定损耗,所以通常咱们更举荐应用 Runtime-Only 的 Vue.js。

退出移动版