理顺8个版本vue的区别(小结)


Posted in Javascript onSeptember 17, 2018

一共8个版本的vue

理顺8个版本vue的区别(小结)

术语

  • 完整版:同时包含编译器和运行时的版本。
  • 编译器:用来将模板字符串编译成为 JavaScript 渲染函数的代码。
  • 运行时:用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。
  • UMD:UMD 版本可以通过 <script> 标签直接用在浏览器中。jsDelivr CDN 的 https://cdn.jsdelivr.net/npm/vue 默认文件就是运行时 + 编译器的 UMD 版本 (vue.js)。
  • CommonJS:CommonJS 版本用来配合老的打包工具比如 Browserify 或 webpack 1。这些打包工具的默认文件 (pkg.main) 是只包含运行时的 CommonJS 版本 (vue.runtime.common.js)。
  • ES Module:ES module 版本用来配合现代打包工具比如 webpack 2 或 Rollup。这些打包工具的默认文件 (pkg.module) 是只包含运行时的 ES Module 版本 (vue.runtime.esm.js)。

重点:

如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项,或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板),就将需要加上编译器

通俗来说,就是runtime版本是无法对template进行解析的

一共8个vue版本,都是用在什么情况下的?

  1. 默认会用的哪个vue版本,vue-cli里用的哪个版本?
  2. 如何指定使用哪个版本的vue?

不急,从2个维度去理解这8个版本。

  • 根据是否需要编译器分为: 运行时版本 和 完整版
  • 根据这个vue代码用在什么地方: 分为UMD / CommonJS / ES Module

【运行时版本】和【完整版】的区别: 用不用编译?

  • 完整版: 包括编译器和运行时的版本
  • 编译器: vue里用的<template></template>语法是需要被编译的
  • 运行时: 用来创建Vue实例、渲染、处理虚拟Dom,可以理解为除了编译器剩下的代码都属于运行时

如果你需要使用template的语法,就需要编译器,那么就要使用完整版

用了.vue文件的大多数情况下,你可以用运行时版本

当你使用vue-loader或vueify的时候, *.vue文件内部会预编译成JS,所以你在最终打好的包里,

实际上是不需要编译器的,所以这种情况,应该用运行时版本,毕竟运行时版本的体积比完整版要小30%

如果我一定要用完整版的呢? 如何选择版本呢?

你需要在webpack里配置alias

module.exports = {
 // ...
 resolve: {
  alias: {
   'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
  }
 }
}

UMD / CommonJS / ES Module 的区别: 你的vue用在什么地方?

  • 当你通过script标签来引用vue源码时,用UMD版本
  • 当你通过低版本的打包工具,比如webpack1,用CommonJS版本
  • 当你通过现代打包工具比如 webpack 2 或 Rollup,用ES Module版本

其他

  • vue源码会根据process.env.NODE_ENV来判断是用生产还是开发环境的代码
  • webpack里可以有自带的 new webpack.DefinePlugin()来设置process.env.NODE_ENV

类似这样

new webpack.DefinePlugin({
   'process.env': env
  }),

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
select组合框option的捕捉实例代码
Sep 30 Javascript
jquery 模板的应用示例
Nov 12 Javascript
jquery的总体架构分析及实现示例详解
Nov 08 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 Javascript
jqTransform美化表单
Oct 10 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 Javascript
关于Angularjs中自定义指令一些有价值的细节和技巧小结
Apr 22 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 Javascript
Vuex mutitons和actions初使用详解
Mar 04 Javascript
vue.js编译时给生成的文件增加版本号
Sep 17 #Javascript
详解关于Vue版本不匹配问题(Vue packages version mismatch)
Sep 17 #Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 #Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 #Javascript
Puppet的一些技巧
Sep 17 #Javascript
详解JavaScript添加给定的标签选项
Sep 17 #Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 #Javascript
You might like
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
js浮动图片的动态效果
2013/07/10 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
javascript面向对象程序设计(一)
2015/01/29 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
JS判断是否长按某一键的方法
2016/03/02 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
nodejs取得当前执行路径的方法
2018/05/13 NodeJs
vue自定义全局共用函数详解
2018/09/18 Javascript
es6函数之rest参数用法实例分析
2020/04/18 Javascript
详解React 条件渲染
2020/07/08 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
Python去除字符串两端空格的方法
2015/05/21 Python
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
Python文件读写常见用法总结
2019/02/22 Python
解析python的局部变量和全局变量
2019/08/15 Python
python生成随机红包的实例写法
2019/09/02 Python
Python的对象传递与Copy函数使用详解
2019/12/26 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
什么是python的函数体
2020/06/19 Python
Python with语句用法原理详解
2020/07/03 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
Python 字典一个键对应多个值的方法
2020/09/29 Python
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
2014年教师节活动总结
2014/08/29 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
十二生肖观后感
2015/06/12 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
周一给客户的问候语
2015/11/10 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript
python实现简易名片管理系统
2021/04/11 Python
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js