理顺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 学习笔记一
Apr 07 Javascript
基于jquery的实现简单的表格中增加或删除下一行
Aug 01 Javascript
Javascript中arguments和arguments.callee的区别浅析
Apr 24 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
详解jQuery简单的表单应用
Dec 16 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
May 07 Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 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开发GUI
2006/10/09 PHP
PHP 高手之路(三)
2006/10/09 PHP
php预定义常量
2006/12/25 PHP
PHP数组循环操作详细介绍 附实例代码
2013/02/03 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
Django 中 cookie的使用
2017/08/17 PHP
jQuery中bind,live,delegate与one方法的用法及区别解析
2013/12/30 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
2015/03/26 Javascript
jquery结婚电子请柬特效源码分享
2015/08/21 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
python实现bitmap数据结构详解
2014/02/17 Python
使用PDB模式调试Python程序介绍
2015/04/05 Python
Python写入CSV文件的方法
2015/07/08 Python
Python基于百度云文字识别API
2018/12/13 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
纯CSS3实现的8种Loading动画效果
2014/07/05 HTML / CSS
关于canvas绘制模糊问题的解决方法
2019/09/24 HTML / CSS
PHP中如何使用Cookie
2015/10/28 面试题
实习心得体会
2014/01/02 职场文书
服装店营销方案
2014/03/10 职场文书
工作说明书范文
2014/05/07 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
初中英语教学随笔
2015/08/15 职场文书
javascript函数式编程基础
2021/09/15 Javascript