理顺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 相关文章推荐
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
jquery 插件开发备注
Aug 27 Javascript
js 实现css风格选择器(压缩后2KB)
Jan 12 Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
实例讲解JavaScript截取字符串
Nov 30 Javascript
JS中的模糊查询功能
Dec 08 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
May 12 Javascript
JS Canvas接口和动画效果大全
Apr 29 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生成静态页面教程
2012/01/10 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
js date 格式化
2017/02/15 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
jQuery遮罩层实例讲解
2017/05/11 jQuery
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
koa+jwt实现token验证与刷新功能
2019/05/30 Javascript
python中使用mysql数据库详细介绍
2015/03/27 Python
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
python决策树之C4.5算法详解
2017/12/20 Python
Apache部署Django项目图文详解
2019/07/30 Python
Django项目后台不挂断运行的方法
2019/08/31 Python
python实现简单成绩录入系统
2019/09/19 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
struct与class的区别
2014/02/03 面试题
教师实习的自我鉴定
2013/10/26 职场文书
安全生产标语
2014/06/06 职场文书
班级读书活动总结
2014/06/30 职场文书
纪检干部对照检查材料
2014/08/22 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
死者家属慰问信
2015/03/24 职场文书
2015年审计人员工作总结
2015/05/26 职场文书
师范生见习总结范文
2015/06/23 职场文书