理顺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
  }),

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue项目在安卓低版本机显示空白的原因分析(两种)

    vue项目在安卓低版本机显示空白原因: 可能的原因一 查看安卓debug,报错,可能有箭头函数语法错误,或者其他语法问题,那可能是ES6语法问题. 这时候需要安装babel-pollyfill. 网上找到方法如下: https://www.jb51.net/article/146840.htm 1.安装babel-polyfill和es6-promise npm i babel-polyfill --save npm i es6-promise --save 2.main.js引入  impor

  • vue-router3.0版本中 router.push 不能刷新页面的问题

    在 github 的 vue-router 中找到同样的一个问题:3.0.1版本通过router实例无法跳转 昨天发现有些路由不能正常跳转,找了一下发现都是那些实例化后使用 router.push 而不是直接使用 this.$router.push 的地方. 出现的情况是 router.push 后,url变化了,但是页面没有刷新,手动刷新一下才出现应有的画面. 我看了一下 package.json,我的 vue 和 axios 是没有写版本号,但 vue-router 明明写了版本号,怎么可能

  • 详解vue过滤器在v2.0版本用法

    1.x写法 <body> <div id="app"> {{html|uppercase}} </div> <script> new Vue({ el:'#app', data:{ msg:"123", html:"abc" } }) </script> </body> 但是2.0中已经废弃了过滤器,需要我们自定义 <div id="app">

  • vue.js编译时给生成的文件增加版本号

    vue.js在生成相关js和css文件的时候,名称是通过HASH的方式进行生成的,但是每次生成的文件基本都是一样的,那么浏览器就会缓存这些文件,为了在更新的时候能够保证js和css文件能够更新,那么我们需要针对webpack的配置文件进行修改: 打开webpack.prod.conf.js文件进行如下操作 1.增加版本变量(版本号暂时用时间代替) var Version = new Date().getTime(); 2.修改要生成的js和css文件的配置项,把刚刚声明的版本拼接进要生成的文件名

  • 详解关于Vue版本不匹配问题(Vue packages version mismatch)

    今天再npm run dev时遇到一个错误: 由于当时vue版本已经到2.9.2版本.按照提示更新,无果.随后发现时由于weex环境的问题.只要巡行以下代码 weex xbind repair toolkit-repair weex repair 即可解决npm run dev无法启动的问题. 补充: 1.npm install vue-template-compiler@2.5.3 出现此问题 npm ERR! path G:\XXX.Web\node_modules\fsevents\nod

  • 详解如何解决Vue和vue-template-compiler版本之间的问题

    今天把远程仓库拉下项目,运行'npm run dev'时,报错 Module build failed: Error: Cannot find module 'vue-template-compiler' 报错原因:通常出现于一些依赖库的更新或者安装新的依赖库之后(可以认为npm update已经成为一种习惯),导致了vue和vue-template-compiler的版本不一致. 解决方案:统一vue和vue-template-compiler的版本 "vue": "2.3

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

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

    一共8个版本的vue 术语 完整版:同时包含编译器和运行时的版本. 编译器:用来将模板字符串编译成为 JavaScript 渲染函数的代码. 运行时:用来创建 Vue 实例.渲染并处理虚拟 DOM 等的代码.基本上就是除去编译器的其它一切. UMD:UMD 版本可以通过 <script> 标签直接用在浏览器中.jsDelivr CDN 的 https://cdn.jsdelivr.net/npm/vue 默认文件就是运行时 + 编译器的 UMD 版本 (vue.js). CommonJS:Co

  • Python 2.7.x 和 3.x 版本的重要区别小结

    许多Python初学者都会问:我应该学习哪个版本的Python.对于这个问题,我的回答通常是"先选择一个最适合你的Python教程,教程中使用哪个版本的Python,你就用那个版本.等学得差不多了,再来研究不同版本之间的差别". 但如果想要用Python开发一个新项目,那么该如何选择Python版本呢?我可以负责任的说,大部分Python库都同时支持Python 2.7.x和3.x版本的,所以不论选择哪个版本都是可以的.但为了在使用Python时避开某些版本中一些常见的陷阱,或需要移植

  • Js+Ajax,Get和Post在使用上的区别小结

    get和post方法最大的不同在于: 1.get方法传值参数在url里面,而post参数放send里面 2.post方法必须加上 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 下面实例可以看get方法 xmlHttp.open("GET","for.php?text="+url,true); 在post里面表现为:

  • 面试题：react和vue的区别分析

    react和vue是什么?有啥区别吗? 三大框架之二,大家应该都不会陌生,都有学习过或者开发中使用. 但是他们到底有啥区别呢?这个就是我们这篇文章所需探讨并学习的. 开始! MVC 和 MVVM 首先,来说明下这些字母代表的含义 M:Model 模型 V:View 视图 C:Controller 控制器 VM:ViewModel 视图模型 首先说下MVC,大家肯定也知道三大框架中的另外一个(anuglar). 如果你写过angular那就肯定能很清楚的了解这个含义,看如下代码: <input n

  • 5分钟学会Vue动画效果(小结)

    本文介绍了5分钟学会Vue动画效果(小结),分享给大家,具体如下: 1.哪些元素/那些组件适合在那些条件下实现动画效果 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 简单经典例子:(文字隐藏到显示效果) <div> <button @click="show = !show">show toggle</button> <transition name="fade"> //fade

  • Python2.x与3​​.x版本有哪些区别

    Python的3​​.0版本,常被称为Python 3000,或简称Py3k.相对于Python的早期版本,这是一个较大的升级. 为了不带入过多的累赘,Python 3.0在设计的时候没有考虑向下相容. 许多针对早期Python版本设计的程式都无法在Python 3.0上正常执行. 为了照顾现有程式,Python 2.6作为一个过渡版本,基本使用了Python 2.x的语法和库,同时考虑了向Python 3.0的迁移,允许使用部分Python 3.0的语法与函数. 新的Python程式建议使用P

  • JavaScript中find()和 filter()方法的区别小结

    目录 前言 JavaScript find() 方法 JavaScript filter() 方法 find() 和 filter() 的区别与共点 直接上代码 总结 前言 JavaScript 在 ES6 上有很多数组方法,每种方法都有独特的用途和好处. 在开发应用程序时,大多使用数组方法来获取特定的值列表并获取单个或多个匹配项. 在列出这两种方法的区别之前,我们先来一一了解这些方法. JavaScript find() 方法 ES6 find() 方法返回通过测试函数的第一个元素的值.如果没

  • vue跳转页面常用的4种方法与区别小结

    目录 1:router-link跳转 2:this.$router.push() 3. this.$router.replace() 4. this.$router.go(n) ps:区别 总结 vue跳转页面有好几种不同方法,下面将通过实例代码给大家介绍,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下. 1:router-link跳转 1.不带参数 <router-link :to="{name:'home'}"> <router-link :to=

  • Mybatis中#{}和${}传参的区别及#和$的区别小结

    最近在用mybatis,之前用过ibatis,总体来说差不多,不过还是遇到了不少问题,再次记录下, 比如说用#{},和 ${}传参的区别, 使用#传入参数是,sql语句解析是会加上"",比如 select * from table where name = #{name} ,传入的name为小李,那么最后打印出来的就是 select * from table where name = '小李',就是会当成字符串来解析,这样相比于$的好处是比较明显对的吧,#{}传参能防止sql注入,如果

  • php4与php5的区别小结(配置异同)

    php4 没有 静态成员 php网页后台出现这样的错误,查过SubPages1.php并没有找到相应的错误.网站在自己本地测试完全正常,传到空间以后就出现这样的错误.连验证码都看不到了,类似的错误还有Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}' in /www/users/myhuashun.com.ufhost/admin/yanzhe

随机推荐