理顺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 相关文章推荐
JavaScript 不只是脚本
May 30 Javascript
用JavaScript隐藏控件的方法
Sep 21 Javascript
javascript对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
javascript 图片裁剪技巧解读
Nov 15 Javascript
jQuery中选择器的基础使用教程
May 23 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
Vue.js创建Calendar日历效果
Nov 03 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
vue中touch和click共存的解决方式
Jul 28 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 Javascript
vue组件的路由高亮问题解决方法
May 11 Vue.js
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内存管理之谁动了我的内存
2013/06/20 PHP
php随机抽奖实例分析
2015/03/04 PHP
php curl 上传文件代码实例
2015/04/27 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
wordpress之js库集合研究介绍
2007/08/17 Javascript
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
浅谈javascript 面向对象编程
2009/10/28 Javascript
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
JavaScript极简入门教程(二):对象和函数
2014/10/25 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
原生JavaScript实现AJAX、JSONP
2017/02/07 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
详解Vue之父子组件传值
2019/04/01 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
python文件和目录操作函数小结
2014/07/11 Python
Python迭代用法实例教程
2014/09/08 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
Python实现爬取并分析电商评论
2020/06/19 Python
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
以幸福为主题的活动方案
2014/08/22 职场文书
酒店销售经理岗位职责
2015/04/02 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
导游词之桂林
2019/08/20 职场文书
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js
mysql事务隔离级别详情
2021/10/24 MySQL
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android