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 相关文章推荐
基于jquery的地址栏射击游戏代码
Mar 10 Javascript
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
vue 简单自动补全的输入框的示例
Mar 12 Javascript
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
May 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
php防攻击代码升级版
2010/12/29 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
php网站地图生成类示例
2014/01/13 PHP
php接口技术实例详解
2016/12/07 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
jQuery ajax cache缓存问题
2010/07/01 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
使用js实现一个可编辑的select下拉列表
2014/02/20 Javascript
JavaScript动态加载样式表的方法
2015/03/21 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
微信小程序实现日历效果
2018/12/28 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
python压包的概念及实例详解
2021/02/17 Python
html5嵌入内容_动力节点Java学院整理
2017/07/07 HTML / CSS
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
浅谈HTML5新增和废弃的标签
2019/04/28 HTML / CSS
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
高中毕业自我鉴定
2013/12/13 职场文书
会计电算化大学生职业规划书
2014/02/05 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
产假请假条
2014/04/10 职场文书
食品安全承诺书
2014/05/22 职场文书
体育专业求职信
2014/07/16 职场文书
土建施工员岗位职责
2015/04/11 职场文书
css3实现背景图片半透明内容不透明的方法示例
2021/04/13 HTML / CSS
用Python将GIF动图分解成多张静态图片
2021/06/11 Python
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang