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

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

1、文件名

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两个版本的区别和使用方法(更深层次了解)，希望对大家有所帮助！

赞 (0)

相关推荐

  • 理顺8个版本vue的区别(小结)

    理顺8个版本vue的区别(小结)

    一共8个版本的vue 术语 完整版:同时包含编译器和运行时的版本. 编译器:用来将模板字符串编译成为 JavaScript 渲染函数的代码. 运行时:用来创建 Vue 实例.渲染并处理虚拟 DOM 等的代码.基本上就是除去编译器的其它一切. UMD:UMD 版本可以通过 <script> 标签直接用在浏览器中.jsDelivr CDN 的 https://cdn.jsdelivr.net/npm/vue 默认文件就是运行时 + 编译器的 UMD 版本 (vue.js). CommonJS:Co

  • vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解

    vue-cli 3.0 正式版于 8月10号发布,但是3.0 与 2.0 版本在搭建项目时到底有何不同呢?下面做一下简单的介绍,希望可以帮到有需要的朋友 1. 全局安装vu-cli 3.0  npm install -g @vue/cli  (如果之前安装了2.0版本,先卸载 npm uninstall -g vue-cli ) ; 安装完 3.0 后,有以下两种创建项目的方式: a . 指令: vue create < project-name> ;然后会出现默认和手动两个选项,跟着步骤走就

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

    在我们使用 vue时,我们可以引用两个不同版本的 Vue,分别是 Vue完整版(vue.js)和 Vue(vue.runtime.js )非完整版,那么它们的区别是什么呢,今天我们就来分析下这两个不同版本之间的区别. 1.文件名 2.文件大小 完整版:同时包含编译器和运行时的版本. 编译器:用来将模板字符串编译成为 JavaScript 渲染函数的代码. 而非完整版不包含编译器,体积约比完整版小 30%. 3.视图 完整版 视图写在 HTML里或者 template选项里,由于有 compile

  • php5 non-thread-safe和thread-safe这两个版本的区别分析

    先从字面意思上理解,None-Thread Safe就是非线程安全,在执行时不进行线程(thread)安全检查:Thread Safe就是线程安全,执行时会进行线程(thread)安全检查,以防止有新要求就启动新线程的 CGI 执行方式耗尽系统资源. 再来看PHP的两种执行方式:ISAPI和FastCGI.FastCGI执行方式是以单一线程来执行操作,所以不需要进行线程的安全检查,除去线程安全检查的防护反而可以提高执行效率,所以,如果是以 FastCGI(无论搭配 IIS 6 或 IIS 7)执

  • vue $mount 和 el的区别说明

    两者在使用效果上没有任何区别,都是为了将实例化后的vue挂载到指定的dom元素中. 如果在实例化vue的时候指定el,则该vue将会渲染在此el对应的dom中,反之,若没有指定el,则vue实例会处于一种"未挂载"的状态,此时可以通过$mount来手动执行挂载. 注:如果$mount没有提供参数,模板将被渲染为文档之外的的元素,并且你必须使用原生DOM API把它插入文档中. 例如: var MyComponent = Vue.extend({ template: '<div&g

  • Python3.0与2.X版本的区别实例分析

    本文通过列举出一些常见的实例来分析Python3.0与2.X版本的区别,是作者经验的总结,对于Python程序设计人员来说有不错的参考价值.具体如下: 做为一个前端开发的码农,最近通过阅读最新版的<A byte of Python>并与老版本的<A byte of Python>做对比后,发现Python3.0在某些地方还是有些改变的.之后再查阅官方网站的文档,总结出一下区别: 1. 如果你下载的是最新版的Python,就会发现所有书中的Hello World例子将不再正确. Py

  • vue-router的两种模式的区别

    vue-router的两种模式的区别

    1.大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容 优点: 良好的交互体验,用户不需要刷新页面,页面显示流畅, 良好的前后端工作分离模式,减轻服务器压力, 缺点: 不利于SEO,初次加载耗时比较多 2.hash模式 vue-router默认的是hash模式-使用URL的hash来模拟一个完整的URL,于是当URL改变的时候,页面不会重新

  • vue中watch和computed的区别与使用方法

    computed 计算属性说明: computed 是基于响应性依赖来进行缓存的.只有依赖数据发生改变,才会重新进行计算(当触发重新渲染,若依赖数据没有改变,则 computed 不会重新计算).若没改变,计算属性会立即返回之前缓存的计算结果. 不支持异步,当 computed 内有异步操作时无效,无法监听数据的变化的值. computed 中的成员可以只定义一个函数作为只读属性, 也可以定义成 get/set 变成可读写属性 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对

  • Vue和React有哪些区别

    一.监听数据变化的实现原理不同 Vue通过 getter/setter以及一些函数的劫持,能精确知道数据变化 ,不需要特别的优化就能达到很好的性能 React默认是通过 比较引用 的方式进行的,如果不优化( pureComponent/shouldComponentUpdate )可能导致大量不必要的VDOM得重新渲染 为什么 React 不精确监听数据变化呢 ?这是因为 Vue 和 React 设计理念上的区别, Vue 使用的是可变数据,而React更强调数据的不可变. 所以应该说没有好坏之

  • Maven中的SnapShot版本和正式版本的区别

    Maven中建立的依赖管理方式基本已成为Java语言依赖管理的事实标准,Maven的替代者Gradle也基本沿用了Maven的依赖管理机制.在Maven依赖管理中,唯一标识一个依赖项是由该依赖项的三个属性构成的,分别是groupId.artifactId以及version.这三个属性可以唯一确定一个组件(Jar包或者War包). 其实在Nexus仓库中,一个仓库一般分为public(Release)仓和SNAPSHOT仓,前者存放正式版本,后者存放快照版本.如果在项目配置文件中(无论是build

  • JS类定义原型方法的两种实现的区别评论很多

    我们知道,给JavaScript类添加原形(prototype)方法是很简单的.而且常用的有下面这两种方法,可是这两种方法在使用时有区别吗?     JScript Class:  复制代码 代码如下: function JSClass()   {        } Extends prototype method:  复制代码 代码如下: JSClass.prototype.MethodA = function()   { }; Or   复制代码 代码如下: function = JSCla

  • Java实现双向链表(两个版本)

    临近春节,项目都结束了,都等着回家过年了.下面是小编给大家研究数据结构的相关知识,链表算是经常用到的一种数据结构了,现将自己的实现展示如下,欢迎大神赐教. 第一个版本,没有最后一个节点,每次从根节点开始遍历 public class LinkedList<E> { private Node head; public LinkedList() { } public E getFirst(){ if(head==null){ return null; } return head.value; }

随机推荐