Vue两个版本的区别和使用方法(更深层次了解)


Posted in Javascript onFebruary 16, 2020

 在我们使用 vue时,我们可以引用两个不同版本的 Vue,分别是 Vue完整版(vue.js)和 Vue(vue.runtime.js )非完整版,那么它们的区别是什么呢,今天我们就来分析下这两个不同版本之间的区别。

1、文件名

Vue两个版本的区别和使用方法(更深层次了解) 

2、文件大小

完整版:同时包含编译器和运行时的版本。

编译器:用来将模板字符串编译成为 JavaScript 渲染函数的代码。

而非完整版不包含编译器,体积约比完整版小 30%。

3、视图

完整版

视图写在 HTML里或者 template选项里,由于有 compiler(编译器)的存在,完整版运行时:用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

非完整版

完整版运行时:当使用 vue-loader 或 vueify 的时候,*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的,所以只用运行时版本即可。

// 不需要编译器
new Vue({
 render (h) {
 return h('div', this.hi)
 }
})

// 需要编译器
new Vue({
 template: '<div>{{ hi }}</div>'
})

4、配置

从 webpack 引入,完整版需要配置 alias,非完整版 是默认配置;

从 @vue/cli 引入,完整版需要额外配置,非完整版 是默认配置。

总结

既然这两者有这么多不同,那我们平时用哪个版本呢?

当然是用非完整版了,理由如下:

1.保证用户体验,用户下载的JS文件体积更小,但只支持h函数

2.保证开发体验,开发者可直接在vue文件里写HTML标签,而不写 h函数

3.活让loader做,vue-loader 会把vue文件里的HTML转为h函数,这样我不用写太多麻烦的 h函数就可做到和完整版一样的事,还更节约文件大小,提升用户体验。

以上所述是小编给大家介绍的Vue两个版本的区别和使用方法(更深层次了解),希望对大家有所帮助!

Javascript 相关文章推荐
javascript 点击整页变灰的效果(可做退出效果)。
Jan 09 Javascript
JQuery CSS样式控制 学习笔记
Jul 23 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
Javascript操作URL函数修改版
Nov 07 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
Bootstrap面板学习使用
Feb 09 Javascript
JavaScript简介_动力节点Java学院整理
Jun 26 Javascript
javascript兼容性(实例讲解)
Aug 15 Javascript
详解cordova打包成webapp的方法
Oct 18 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
vue数据响应式原理知识点总结
Feb 16 #Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 #Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
Feb 15 #Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 #Javascript
js表达式与运算符简单操作示例
Feb 15 #Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 #Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 #Javascript
You might like
咖啡的植物学知识
2021/03/03 咖啡文化
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
PHP实现的sqlite数据库连接类
2014/12/12 PHP
php实现将数组转换为XML的方法
2015/03/09 PHP
parentElement,srcElement的使用小结
2014/01/13 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
javascript匀速运动实现方法分析
2016/01/08 Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
2016/12/28 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
Angularjs实现上传图片预览功能
2017/09/01 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python实现随机生成有效手机号码及身份证功能示例
2017/06/05 Python
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
python调用摄像头显示图像的实例
2018/08/03 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
Django发送邮件功能实例详解
2019/09/02 Python
keras读取h5文件load_weights、load代码操作
2020/06/12 Python
工厂会计员职责
2014/02/06 职场文书
能源工程专业应届生求职信
2014/03/01 职场文书
基层党组织公开承诺书
2014/03/28 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
国际贸易实训报告
2014/11/05 职场文书
MySQL 慢查询日志深入理解
2021/04/22 MySQL
解决Go gorm踩过的坑
2021/04/30 Golang
使用CSS实现黑白格背景效果
2022/06/01 HTML / CSS