vue的完整版和运行时版的区别

更新日期: 2020-06-11 阅读: 2.8k 标签: vue

完整版和运行时版

打开vue的官网,你会发现有Vue有两种不同的构建版本,Vue官方对两种不同构建版本的解释是这样子的:

  • 完整版:同时包含编译器和运行时的版本(编译器:用来将模板字符串编译为JS渲染函数代码

  • 运行时:用来创建Vue实例,渲染并处理虚拟dom等的代码,基本上就是出去编译器的其它一切。

两种版本UMDCommonJS基于构建工具使用直接用于浏览器
完整版vue.jsvue.common.jsvue.esm.jsvue.esm.browser.js
运行时版vue.runtime.jsvue.runtime.common.jsvue.runtime.esm.js

两种版本的区别

比较列完整版运行时版评价
特点有compiler没有 compiler完整版体积较大,其中仅compiler就占整个文件40%大小
视图写在html中或者写在template选项中写在 render 函数里,用 h 来创建标签h 是尤雨溪写好传给 render 的
CDN引入vue.jsvue.runtime.js文件名不同,生成环境后缀为 .min.js
webpack 引入需要配置 alias默认使用此版本尤雨溪所配置
@vue/cli 引入需要额外配置默认使用此版本尤雨溪蒋豪群所配置

最佳实践:总是使用非完整版,然后配合vue-loader 和 vue 来进行使用。

思路

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

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

  • 脏活累活让 loader 做,vue-loader 把 vue 文件里面的 html 转为 h 函数。


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/9351

相关推荐

基于vue移动端UI框架有哪些?vue移动端UI框架总汇

vue现在使用的人越来越多了,这篇文章主要整理一些比较优秀的移动端ui框架,推荐给大家,例如:mint UI、vux、vonic、vant、cube-ui、Muse-ui、Vue-Carbon、YDUI等

vue watch监听对象的使用_实现首次不触发、深度监听

vue中的watch是一个对象,所以一定要当成对象来用,它有键-值组成,其中键就是你要监控的那个数据。这篇文章介绍:vue如何实现首次不触发watch,vue如何实现数据的深度监听?

组件化的概念/特性/优点,Vue组件的使用

Web 中的组件其实就是页面组成的一部分,具有高内聚性,低耦合度,互冲突等特点,有利于提高开发效率,方便重复使用,简化调试步骤等。vue 中的组件是一个自定义标签形式,扩展原生的html元素,封装可重用的代码。

vue扩展——使用vue插件添加全局方法属性

在使用vue构建一些大型项目的时候,会发现许多组件会共用到一些函数或常量,我们需要把它提取出来,每次需要的时候调用一次就可以了,避免每个组件都重新写再一篇的麻烦。

Vue的href动态拼接绑定

:href前面要加“:”或者v-bind: 字符串要用单引号包住 加上了冒号是为了动态绑定数据,等号后面可以写变量。 如果不使用冒号,等号后面就可以写字符串等原始类型数据。这是就无法进行动态绑定数据了

vue引用js文件的多种方式

vue引用js文件的多种方式,这里以为引入jquery为例。js引入文件方式包括: vue-cli webpack全局引入jquery、vue组件引用外部js的方法、单vue页面引用内部js方法

Vue的理解:Vue.js新手入门指南

从一个从未接触过除HTML+CSS+JavaScript+JQuery以外的前端技术的人到现在可以独立使用Vue.js以及各种附属的UI库来开发项目,我总结了一些知识和经验想与大家分享。

vue与后台交互ajax数据

Vue.js是一套构建用户界面的渐进式的前端框架。 vueJS与后台交互数据的方法我所了解的有以下几种

Vue.js最佳实践:五招让你成为Vue.js大师

本文面向对象是有一定Vue.js编程经验的开发者。如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给你们写。对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站

Vuejs讲解之:响应式、过渡效果、过渡状态

Vue是一套构建用户界面的JS渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。讲解js高级之响应式、过渡效果、过渡状态。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!