vue.js2.0的独立构建和运行时构建
转自:https://jingsam.github.io/2016/10/23/standalone-vs-runtime-only-build-in-vuejs2.html?utm_source=tuicool&utm_medium=referral
在使用 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.js2.0的独立构建和运行时构建的更多相关文章
- Vue.js 2.0 独立构建和运行时构建的区别
Vue.js 2.0 独立构建和运行时构建的区别 在使用 Vue.js 2.0 时,有独立构建(standalone)和运行时构建(runtime-only)两种版本可供选择.而在 Vue.js 1. ...
- vue.js2.0:如何搭建开发环境及构建项目
1,安装node.js Node.js官网:https://nodejs.org/en/ 进入Node.js官网,选择下载并安装Node.js.安装过程只需要点击“下一步”即可, 如下图,非常简单. ...
- vue.js2.0实战(1):搭建开发环境及构建项目
Vue.js学习系列: vue.js2.0实战(1):搭建开发环境及构建项目 https://my.oschina.net/brillantzhao/blog/1541638 vue.js2.0实战( ...
- 浅谈Vue.js2.0某些概念
Vue.js2.0是一套构建用户界面的渐进式框架,目标是实现数据驱动和组件系统. A 渐进式框架 Vue.js是一个提供MVVM数据双向绑定的库,只专注于UI层面,这是它的核心.它本身没有解决SP ...
- 《vue.js2.0从入门到放弃》学习之路
原文地址: Vue.js2.0从入门到放弃---入门实例(一):http://blog.csdn.net/u013182762/article/details/53021374 Vue.js2.0从入 ...
- vue.js2.0+elementui ——> 后台管理系统
前言: 因为观察到vue.js的轻量以及实时更新数据的便捷性,于是新项目便决定使用vue.js2.0以及与之配套的elementui来完成.只是初次接触新框架,再使用过程中,遇见了各种各样“奇葩”的问 ...
- vue.js2.0 (简易)水果商城 vuex vant-ui
vue.js2.0 (简易)水果商城 vuex vant-ui:https://segmentfault.com/a/1190000015690250 vue2.5全家桶 高仿vivo商城 百分之95 ...
- 耗时近一个月,终于录完了VUE.JS2.0前端视频教程!
这次课录制的比较辛苦,圣诞节时原本已经快录制完成了,偶然的一次,播放了一下,感觉不满意,好几篇推倒重来,所以今天才结束. vue.js2.0是Vue.JS的最新版本,视频教程还不多,如果你看到了,学到 ...
- Vue-cli+Vue.js2.0+Vuex2.0+vue-router+es6+webpack+node.js脚手架搭建和Vue开发实战
Vue.js是一个构建数据驱动的web界面的渐进式框架.在写这边文章时Vue版本分为1.0++和2.0++,这个是基于Vue2.0的项目. Vue-cli是构建单页应用的脚手架,这个可是官方的. Vu ...
随机推荐
- Ubuntu 16.04安装搜狗输入法
转载: http://www.it610.com/article/5319575.htm 打开firefox浏览器,输入网址www.baidu.com,打开后搜索搜狗拼音 linux进入到搜狗拼音li ...
- Virtualbox中不能为虚拟机打开一个新任务的原因及解决方法
VirtualBox新建虚拟机时报错,不能为虚拟机打开一个新任务的原因 解决办法如下 1.保证bios里的virtualization technology的选项开启,不同电脑BIOS设置可能会不一样 ...
- 学习UFT11.5历程(三)
已经用UFT11.5完成了几个大流程的录制和脚本调测. 现整理下这段过程中脚本中应该记住的点(QTP是VB脚本): 1. 循环和条件部分_reporter结果展示 For i = 1 To brow ...
- go排序
补注: 近来又看 go 的排序, 发现以前对 go 的排序理解的有点浅了. go 的排序思路和 c 和 c++ 有些差别. c 默认是对数组进行排序, c++ 是对一个序列进行排序, go 则更宽泛一 ...
- error CS0117: `UnityEditor.EditorUtility' does not contain a definition for `GetAssetPreview'
have to replace: EditorUtility by AssetPreview
- 20个人艰不拆的事实:知道真相的我眼泪掉下来 T.T
20个人艰不拆的事实:知道真相的我眼泪掉下来 T.T 原文链接http://www.u148.net/article/113612.html 来源:ruoning WuMo是丹麦画家Mikael Wu ...
- <css篇>关于页面的绝对定位与相对定位,且支持页面各元素自适应
(哈哈,第一次写博客,简称处贴?主要记录下平时工作中遇到的问题及其解决方案,方便以后解决此类问题.) 话不多说,上代码看吧 代码有点乱,以后自己能看得懂就行咯 <body > <di ...
- SpringMVC+Mybatis+Spring整合
Maven引入需要的JAR包 pom.xml <properties> <!-- spring版本号 --> <spring.version>4.0.2.RELEA ...
- 修改主机hostname
1 修改hostname配置文件 vi /etc/sysconfig/network中的HOSTNAME 2 修改完后,使用hostname命令验证,发现hostname还是原来的 退出shell重新 ...
- js判断数据类型
1.判断一个数字是否是无穷的 isFinite()例:var aa=Number.POSITIVE_INFINITY; if(isFinite(aa)){ alert("aa不是无穷的&qu ...