理顺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 相关文章推荐
jquery使用ColorBox弹出图片组浏览层实例演示
Mar 14 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
利用jquery实现下拉框的禁用与启用
Dec 07 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
Jun 15 Javascript
D3.js实现拓扑图的示例代码
Jun 30 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
JavaScript获取当前url路径过程解析
Dec 27 Javascript
JavaScript this关键字指向常用情况解析
Sep 02 Javascript
js实现验证码干扰(动态)
Feb 23 Javascript
js 实现验证码输入框示例详解
Sep 23 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
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
php和nginx交互实例讲解
2019/09/24 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
html中table数据排序的js代码
2011/08/09 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
python 打印直角三角形,等边三角形,菱形,正方形的代码
2017/11/21 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
Python单元和文档测试实例详解
2019/04/11 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
Python Lambda函数使用总结详解
2019/12/11 Python
python中四舍五入的正确打开方式
2021/01/18 Python
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
string = null 和string = ''的区别
2013/04/28 面试题
25道Java面试题集合
2013/05/21 面试题
市级青年文明号申报材料
2014/05/26 职场文书
大学同学会活动方案
2014/08/20 职场文书
春晚观后感
2015/06/11 职场文书
Python基础知识之变量的详解
2021/04/14 Python
mysql中between的边界,范围说明
2021/06/08 MySQL
Python os和os.path模块详情
2022/04/02 Python
openstack云计算keystone组件工作介绍
2022/04/20 Servers