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 选项实时编译模板,那么还是需要使用独立构建将编译器发送到浏览器。

Vue.js 2.0 独立构建和运行时构建的区别的更多相关文章

  1. vue.js2.0的独立构建和运行时构建

    转自:https://jingsam.github.io/2016/10/23/standalone-vs-runtime-only-build-in-vuejs2.html?utm_source=t ...

  2. Vue.js 2.0 和 React、Augular

    Vue.js 2.0 和 React.Augular 引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那 ...

  3. 更轻更快的Vue.js 2.0与其他框架对比(转)

    更轻更快的Vue.js 2.0 崭露头角的JavaScript框架Vue.js 2.0版本已经发布,在狂热的JavaScript世界里带来了让人耳目一新的变化. Vue创建者尤雨溪称,Vue 2.0  ...

  4. Vue.js 2.0源码解析之前端渲染篇

    一.前言 Vue.js框架是目前比较火的MVVM框架之一,简单易上手的学习曲线,友好的官方文档,配套的构建工具,让Vue.js在2016大放异彩,大有赶超React之势.前不久Vue.js 2.0正式 ...

  5. 基于 Vue.js 2.0 酷炫自适应背景视频登录页面的设计『转』

    本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果. ...

  6. 【转】Vue.js 2.0 快速上手精华梳理

    Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...

  7. 还学的动吗? 盘点下Vue.js 3.0.0 那些让人激动的功能

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://blog.bitsrc.io/vuejs-3-0-0-beta-features- ...

  8. 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?

    引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...

  9. 窥探Vue.js 2.0

    title: 窥探Vue.js2.0 date: 2016-09-27 10:22:34 tags: vue category: 技术总结 --- 窥探Vue.js2.0 令人兴奋的Vue.js 2. ...

随机推荐

  1. JAVA 解压压缩包中指定文件或实现压缩文件的预览及下载单个或多个指定的文件

    业务逻辑中还要判读用户是否有此文件的防问权限 2017-04-20 新增文件与文件夹图标显示及过滤高亮显示功能: 2017-05-20 新增搜索向前及向后.及更新下载功能.更新文件路径显示: 测试地址 ...

  2. 黑吃黑第四季/全集Banshee迅雷下载

    英文全名Banshee,第5季(2015)Cinemax. 本季看点:<黑吃黑>Ana Ayora加盟第四季,将会饰演Nina Cruz,表面上是在镇里一个聪明而又强悍的新副警长,但实际是 ...

  3. 好汉两个半第十二季/全集Two and a Half Men迅雷下载

    本季Two And A Half Men Season 12 (2014)看点:<好汉两个半>的“半个”是因为第一季播出时杰克年纪太小,只能算半个.故事就在这三个主角和他们周围的女人中发生 ...

  4. windows下apk查看工具的原理

    游戏出了版本之后,提供给渠道,有部分渠道会修改包名(当他们内部系统做出调整后,可能会改包名),这个时候我又需要知道包名.之前没办法,试图反编译apk,发现失败了.然后就安装apk到手机上,手机上再下载 ...

  5. 深入理解多线程(四)—— Moniter的实现原理

    在深入理解多线程(一)——Synchronized的实现原理中介绍过关于Synchronize的实现原理,无论是同步方法还是同步代码块,无论是ACC_SYNCHRONIZED还是monitorente ...

  6. probotuf 标量数值类型

    标量数值类型 一个标量消息字段可以含有一个如下的类型--该表格展示了定义于.proto文件中的类型,以及与之对应的.在自动生成的访问类中定义的类型: .proto类型 Java 类型 C++类型 备注 ...

  7. C# 数组基础知识

    数组的属性: 数组可以是一维.多维或交错的. 数值数组元素的默认值设置为零,而引用元素的默认值设置为 null. 交错数组是数组的数组,因此,它的元素是引用类型,初始化为 null. 数组的索引从零开 ...

  8. ISP图像处理&&相机系统

    如何理解 ISO.快门.光圈.曝光这几个概念? 摄影基础篇——彻底弄清光圈.快门与ISO 理解这三个参数各自都是如何控制进入的光线量: 快门速度一般的表示方法是1/100s.1/30s.2s: 小的“ ...

  9. 自定义View 水印布局 WaterMark 前景色 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  10. 发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser

    发布一个高效的JavaScript分析.压缩工具 JavaScript Analyser 先发一段脚本压缩示例,展示一下JSA语法压缩和优化功能. try { //xxxx(); } catch (e ...