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 相关文章推荐
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
Mar 29 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
js正则表达式中exec用法实例
Jul 23 Javascript
Bootstrap CSS布局之表格
Dec 17 Javascript
js实现表格筛选功能
Jan 18 Javascript
浅谈vue.js中v-for循环渲染
Jul 26 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
vue2配置scss的方法步骤
Jun 06 Javascript
小程序实现搜索框功能
Mar 26 Javascript
layui写后台表格思路和赋值用法详解
Nov 14 Javascript
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
windows下PHP APACHE MYSQ完整配置
2007/01/02 PHP
php 验证码制作(网树注释思想)
2009/07/20 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
PHP云打印类完整示例
2016/10/15 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
JavaScript入门教程(2) JS基础知识
2009/01/31 Javascript
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
禁用Enter键表单自动提交实现代码
2014/05/22 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
详解jQuery Mobile自定义标签
2016/01/06 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
js动态生成form 并用ajax方式提交的实现方法
2016/09/09 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
JavaScript 过滤关键字
2017/03/20 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
layui的select联动实现代码
2019/09/28 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
大学生创业策划书
2014/02/02 职场文书
《理想》教学反思
2014/02/17 职场文书
村级四风对照检查材料
2014/08/24 职场文书
电影焦裕禄观后感
2015/06/09 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python