vue独立构建和运行构建

有两种构建方式,独立构建运行构建。它们的区别在于前者包含模板编译器而后者不包含。

模板编译器:模板编译器的职责是将模板字符串编译为纯 JavaScript 的渲染函数。如果你想要在组件中使用 template 选项,你就需要编译器。

模板字符串: template。Vue字符串模板 。el上提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。

独立构建: 独立构建包含模板编译器并支持 template 选项。 它也依赖于浏览器的接口的存在,所以你不能使用它来为服务器端渲染。

运行构建: 运行时构建不包含模板编译器,因此不支持 template 选项,只能用 render 选项,但即使使用运行时构建,在单文件组件中也依然可以写模板,因为单文件组件的模板会在构建时预编译为 render 函数。所以运行时构建比独立构建要轻量30%。

template:一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略,除非模板的内容有分发 slot。

render:字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力。render 函数接收一个 createElement 方法作为第一个参数用来创建 VNode。


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

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

Vue.js 的运行过程实际上包含两步。

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

Vue.js 为什么存在独立构建和运行构建这两种构建模式?

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

然而到了 Vue.js 2.0,为了支持服务端渲染(server-side rendering),编译器不能依赖于 DOM,所以必须将编译器和运行时分开。

这就形成了独立构建(编译器 + 运行时)和运行时构建(仅运行时)。
显而易见,运行时构建要小于独立构建。

在现代前端工程构建中,通常会使用 vue-loader 和 vueify 预编译模板。在这种情况下,只需要打包运行时,而不需要打包编译器,运行时构建即可满足所需。

当然,如果你需要在前端使用 template 选项实时编译模板,那么还是需要使用独立构建将编译器发送到浏览器。


总结:

一、独立构建包含模板编译器,运行时构建不包含模板编译器。
二、模板编译器的作用就是将template选项编译成render函数,render函数是渲染的关键。
三、鉴于以上两点,使用运行时构建时,不能出现template选项,因为此时没有模板编译器。但是有一种情况除外:即webpack+vue-loader情况下单文件组件中出现template是可以的。
四、使用vue-cli生成项目时,会提醒使用哪种构建方式,npm包默认导出的是运行时构建,如果需要使用独立构建,需要在webpack中配置alias
五、目前暂时发现的两者的应用场景上的区别有

* 一、需要注意Vue实例化时的方式,运行时构建方式下实例化Vue时,不要出现template属性。
* 二、index.html中不要出现template或者是通过vue-router渲染的route-view 。
* 三、以上区别讨论的场景均为使用webpack+vue-loader单文件组件下,其他的区别暂时未发现。

反正就是两种不同的构建模式。可以适用与前后台而已。
前端构建前:独立构建可以在客户端执行,而运行时构建不支持template的编译器,所以不可以执行。
后端构建前:独立构建可以在不可以在客户端执行,因为有编译器,而运行时构建就可以执行。
构建后:构建后的文件都成为render渲染了,所以都可以执行。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,082评论 0 29
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 11,108评论 4 129
  • 19:27,Z44列车启动前一秒。 要去吗?那人说。 嗯。声音还没落地,安宁已经跳上Z44。她没有回头,只是朝身后...
    江一何阅读 342评论 0 0
  • 2017年1月10日,为了更好地推动人工智能科研成果向产业实践转化,强化创新工场人工智能工程院的平台作用, 创新工...
    Stan森阅读 297评论 0 0
  • 小时候听过一个相声段子,当然全程毫无笑尿点,但比德云社高大上一些,有一个学生,暂且叫小明吧。 老师问小明,你崇拜什...
    思想聚焦的原创阅读 645评论 0 106