zoukankan      html  css  js  c++  java
  • Vue.js 2.0 独立构建和运行时构建的区别

      在使用 Vue.js 2.0 时,有独立构建(standalone)和运行时构建(runtime-only)两种版本可供选择。而在 Vue.js 1.0 中,却没有这种版本区别。到底该使用哪一个版本?这让我有点懵逼的感觉。本着知其然还要知其所以然的精神,我决定好好研究下两者间的区别。

      Vue.js 的官方教程上是这么说的:

      独立构建包括编译和支持 template 选项。 它也依赖于浏览器的接口的存在,所以你不能使用它来为服务器端渲染。 运行时构建不包括模板编译,不支持 template 选项。运行时构建,可以用 render 选项,但它只在单文件组件中起作用,因为单文件组件的模板是在构建时预编译到 render 函数中,运行时构建只有独立构建大小的 30%,只有 16Kb min+gzip 大小。

    看了半天,实在没搞清两者之间的区别。经过一番搜索,终于搞清楚了问题的本源,且听我娓娓道来。

    Vue.js 的运行过程实际上包含两步。第一步,编译器将字符串模板(template)编译为渲染函数(render),称之为编译过程;第二步,运行时实际调用编译的渲染函数,称之为运行过程。

    由于 Vue.js 1.0 的编译过程需要依赖浏览器的 DOM,所以无法(或者说没有意义)将编译器和运行时分开。因此在 Vue.js 1.0 分发包中,编译器和运行时是打包在一起,都在浏览器端执行。

    然而到了 Vue.js 2.0,为了支持服务端渲染(server-side rendering),编译器不能依赖于 DOM,所以必须将编译器和运行时分开。这就形成了独立构建(编译器 + 运行时)和运行时构建(仅运行时)。显而易见,运行时构建要小于独立构建。

    在现代前端工程构建中,通常会使用 vue-loader 和 vueify 预编译模板。在这种情况下,只需要打包运行时,而不需要打包编译器,运行时构建即可满足所需。当然,如果你需要在前端使用 template 选项实时编译模板,那么还是需要使用独立构建将编译器发送到浏览器。

  • 相关阅读:
    我深知黑暗,但心向光明(记毕业后第一次在北京求职)
    CF 1200E HASH模板
    CF580D
    CF1433F
    CF1451 E1交互题
    11.23-11.29 训练计划
    11.22 CF总结 #682
    sql问题:备份集中的数据库备份与现有的 '办公系统' 数据库不同
    内容导出成word
    让超链接无法跳转的方法
  • 原文地址:https://www.cnblogs.com/fangshidaima/p/7010076.html
Copyright © 2011-2022 走看看