微信小程序选项卡功能开发步骤与方法全解析
638
2023-02-27
vue小程序框架（vuejs 小程序）
本篇文章给大家谈谈vue小程序框架，以及vuejs 小程序对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
今天给各位分享vue小程序框架的知识，其中也会对vuejs 小程序进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
1. WePY
WePY属腾讯系，是一款组件化的开发框架，比原生小程序的开发模式更接近于MVVM ，它类Vue的开发风格，让Vue开发者很容易上手。
Github地址: https://github.com/Tencent/wepy
官网地址：https://tencent.github.io/wepy
2. mpvue
mpvue 是美团点评开源的一个使用Vue.js开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。
Github：https://github.com/Meituan-Dianping/mpvue
官网：http://mpvue.com/
演示地址：https://vux.li/demos/v2/?x-page=v2-doc-home#/
基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式（下拉刷新上拉加载组件不再维护，其余组件相对丰富）
文档地址：https://wangdahoo.github.io/vonic-documents/#/
演示地址：https://wangdahoo.github.io/vonic/docs/#/home
一个基于 vue.js 和 ionic 样式的 UI 框架，用于快速构建移动端单页应用，很简约
文档地址：https://didi.github.io/cube-ui/#/zh-CN/docs/introduction
演示地址：https://didi.github.io/cube-ui/#/zh-CN/example
滴滴 WebApp 团队 实现的 基于 Vue.js 实现的精致移动端组件库；组件效果优；视觉效果很棒
文档地址：http://mint-ui.github.io/docs/#/
演示地址：http://elemefe.github.io/mint-ui/#/
最接近原生APP体验的高性能前端框架
文档地址：https://youzan.github.io/vant/#/zh-CN/intro
演示地址：https://youzan.github.io/vant/mobile.html#/zh-CN/
有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件
文档：http://nutui.jd.com/#/intro
演示地址：http://nutui.jd.com/demo.html#/index
一套京东风格的轻量级移动端Vue组件库
特性
跨平台，自动转微信小程序组件（稍后上线，敬请期待）
30+ 京东移动端项目正在使用
基于京东APP 7.0 视觉规范
支持按需加载
详尽的文档和示例
支持定制主题
支持多语言（国际化）
支持 TypeScript
支持服务端渲染（Vue SSR）
单元测试加持
配套有基于Webpack的构建工具，可快速创建已内置本组件库的Vue工程
商城小程序必备的数字输入框。
在 .json 中引入组件
在 .wxml 中引入
下面是运行的效果，总的来看还是不错的。
还有个常用的动作面板。
从底部弹出的模态框，提供和当前场景相关的 2 个以上的操作动作，也支持提供标题和描述。内置固定的展示样式、不支持特别灵活的修改。
在 .json 中引入组件
在 .wxml 中引入组件
这个动作面板和微信小程序原生的动作面板有啥视觉的区别，一起来看看：
总的来讲 iview 还比较好看的。
更多用法去参考： https://weapp.iviewui.com/
另外有赞出品的 vant 框架小程序版，使用方法去看 小程序如何使用 npm 工具
重写框架内核：基于vue3 + ts重写内置组件和API，实现更彻底、更高效的tree-shaking；
新增支持 Vite 构建工具，在H5平台实现秒开预览；
新增支持 Vue3.x，实现更灵活的开发方式，及更高的运行性能；
基于这三大改进，uni-app项目获得了多快好省四大收益：
更多的语法支持，支持组合式API，业务聚焦，开发效率更高；
更快的编译速度，H5平台十倍加速，小程序、App加速30%以上；
更好的运行性能，用户端响应更快，体验更好；
更小的代码体积，瘦身30%以上，更省体积、更省流量
更多的语法支持
新版uni-app支持Vue 3.x框架，支持组合式API，可实现更聚焦的业务开发。
Vue 3.x的一些新增特性，uni-app也已经完全支持，如：
支持<script setup
支持<style scoped、<style module、State-Driven Dynamic CSS(v-bind)
支持jsx、tsx（h5,app 平台支持，小程序不支持）
另外，在小程序平台，新版uni-app也扩展了更多的语法，如：
更完善的模板语法支持（如 class、style 支持函数、变量等，不再局限数组、对象类型）
更完整的 props 支持（如传递函数）
更完善的 slot 支持（如作用域插槽）
更快的编译速度
开发者日常工作中，最无聊的就是等待编译构建。
某乎上还有一个”程序员在等待编译的时候都做什么？“的讨论帖，可见编译时间对开发者而言，是一个多么尴尬无聊的碎片时间。
uni-app本次升级vue3 Vite后，在编译时间上有多少改进？带给开发者多少福利？我们安排真实测试，以数据说话。
测试环境说明：
硬件：RedmiBook 14 二代
处理器：Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz
内存：16.0 GB
操作系统：Windows 11 专业版 64 位操作系统
关于编译速度，我们做了两个维度的对比：
纵向对比：挑选uni-app常用项目模板，在H5、小程序、App平台，分别测试vue 2.6和vue 3.x的编译时间
横向对比：使用业内优秀的其它跨端框架，创建默认项目模板，记录其编译时间，和uni-app的vue 3.x版本进行对比
uni-app 历史版本纵向对比
我们选择uni-app默认模板、uni-starter、hello-uniapp三个项目模板，分别测试vue 2.6和vue 3.x的编译时间。
uni-app项目编译时间的采集方式：
vue 2.6版本编译时间 = webpack 的 stats.endTime - stats.startTime
vue 3.x版本编译时间 = 构建工具入口处记录 global.vite_start_time = performance.now()，构建工具编译完成时：performance.now() - global.vite_start_time
H5平台
对uni-app的三个项目模板分别运行到H5平台，进行多次编译测试，并求其均值后，获得如下数据：

由此，我们可以观察到：
在vue 2.6环境下，随着项目复杂度的提升，H5首页预览所需编译时间会直线增加；这是因为在vue 2.6版本下，虽然仅预览首页，但依然会使用 webpack 编译整个项目资源；故项目越复杂，编译时间越长；
在vue 3.x环境下，H5首页预览的编译时间跟项目复杂度也有关系，但增幅不大；这是因为在vue 3.x版本下，使用 Vite 进行构建，预览首页时仅编译首页及首页所依赖资源，不会编译其它页面资源。
通过图表对比，我们可以直观得出结论：vue 3.x环境下的首页编译时间，平均不到vue 2.6环境下的十分之一。
换言之，vue 3.x版本下的首页编译速度，相比vue 2.6版本，有十倍效率提升。
这个十倍效率提升，主要得益于新版采用Vite作为构建工具，由此带来了两大好处：
使用原生 ESM 文件，无需打包，实现极速的服务启动；
预览（运行）使用esbuild作为打包工具，相比vue 2.6环境下的webpack，构建速度快 10-100 倍（这不是我们夸大，详见esbuild）
本着这个十倍效率提升，小伙伴们还不赶紧上手试试？
小程序平台
对uni-app的三个模板项目运行到小程序平台，多次编译测试，并求其均值后，获得如下数据：

从上图对比数据来看，我们可以得出结论：小程序平台，vue 3.x版本下的运行编译，相比vue 2.6版本，编译性能至少提升30%；且项目越复杂，编译性能提升越明显，可以达到40% ~ 50%。
App平台
对uni-app的三个项目模板继续运行到App平台，多次编译测试，并求其均值后，获得如下数据：

从上图对比数据来看，我们可以得出结论：App平台，vue 3.x版本下的运行编译，相比vue 2.6版本，编译性能提升将近50%。
虽没有H5平台的十倍效率提升那么刺激，但将近50%的速度提升，经常开发小程序/App的小伙伴，还不心动？
业内优秀框架横向对比
除了采用不同版本的uni-app进行纵向对比外，我们还使用业内优秀的跨端框架Taro，创建空的项目模板，进行横向对比测试。
具体测试方案：
安装Taro的最新cli，本文测试时使用的版本为"@Tarojs/Taro": "3.3.16"
使用Taro init命令，分别选择react、vue、vue3框架，创建三个默认项目模板，三个项目名称分别为taro3-react、taro3-vue、taro3-vue3，如下图：

使用npm run dev:h5，运行到H5平台进行预览，记录每次预览编译时间，重复执行，求其均值
关于Taro编译时间的计算方案：
开发一个Taro扩展插件，插件规范参考Taro官网 - 插件功能
在ctx.onBuildStart中记录开始编译时间
在ctx.onBuildFinish中记录编译结束时间
两者的时间差，即为编译过程消耗时间
然后使用uni-app的cli命令行，创建基于vue3.x的空项目模板，项目命名为uni-app-vue3。
我们使用各自框架的命令行，将如上创建的5个项目分别编译到H5平台和小程序平台，多次测试，并求其均值。
同框架版本在H5平台上的编译时间，结果如下：

从图中可以看出，uni-app的vue3版本，在H5平台上的首页编译预览性能是遥遥领先的。这个遥遥有多远呢？这么讲吧，你都编译20次了，友商第一次还没完呢。
继续编译到小程序平台，多次测试，求其均值，结果如下：

从图中可以看出，uni-app的vue3版本，在小程序平台上的编译性能也是遥遥领先的，这个遥遥也不近。
更好的运行速度
开发环节编译快了，那面向最终用户的软件，运行性能怎么样？
我们进入性能测试章节。
测试方案：
开发内容：开发一个仿微博小程序首页的复杂长列表，支持下拉刷新、上拉翻页、点赞。
界面如下：

测试机型：小米 Mi 10 pro、MIUI 12.5 (21.11.3 开发版) 、微信版本 8.0.16
准备工作：每次开始测试前，杀掉各App进程、清空内存，保证测试机环境基本一致；每次从本地读取静态数据，屏蔽网络差异。
评测点：长列表中的某个组件，比如点赞组件，点击时是否能及时的修改未赞和已赞状态？
测试计时方式：
选中某微博，点击“点赞”按钮，实现点赞状态状态切换（已赞高亮、未赞灰色），
点赞按钮 onclick函数开头开始计时，setData回调函数开头结束计时；
在小米手机上进行多次测试，求其平均值，结果如下：
记录条数 200 400 600 800 1000
vue2 30ms 43ms 56ms 72ms 90ms
vue3 8ms 9ms 9ms 8ms 9ms
从表格中可以看出：
随着页面记录的增加，vue 2.6版本的uni-app项目，点赞组件响应时间快速增加，响应越来越慢；
基于vue 3.x的uni-app项目，点赞组件的响应时间跟页面条数无关，一直保持极高的响应灵敏度，性能体验远高于vue 2.6版本。
从这个常见的长列表组件响应实验来看，vue 3.x的性能体验要远高于vue 2.6版本。
更小的代码体积
项目发行后的代码体积，是一个很重要的考量指标：
H5平台：更小的代码体积，可以帮助开发者节省服务端带宽及CDN流量，可实现更快的资源加载及页面渲染；
小程序平台：更小的代码体积，可加速小程序包的-（甚至可能免了分包加载的繁琐），帮助用户更快进入小程序业务界面；
App平台：更小的代码体积，可实现更快的App启动，帮助用户更快进入App首页
为了测试vue 3.x新版升级后，代码体积的变化，我们同样做了两个维度的测试：
纵向对比：选择uni-app常用项目模板，在H5、小程序、App平台，分别测试vue 2.6和vue 3.x的编译包大小
横向对比：使用业内优秀的其它跨端框架，创建默认项目模板，记录其编译后的包体积大小，和uni-app版本进行对比
Tips：
开发阶段重在编译速度，对应npm run dev操作
发行阶段重在编译包大小，对应npm run build操作
uni-app 不同版本纵向对比
我们复用之前创建的uni-app默认模板、uni-starter、hello-uniapp三个项目模板，分别测试vue 2.6和vue 3.x的编译包体积。
uni-app项目编译包体积的采集方式：编译到对应平台后，记录编译后文件夹的大小。
H5平台
H5平台编译后代码体积记录如下：

从统计结果来看，uni-app的vue3.x版本，在H5平台上的编译包体积至少瘦身30%以上。
H5平台的瘦身优化，主要得益于uni-app框架的底层全面重构，实现了更彻底的摇树优化。
小程序平台
小程序平台编译后代码体积记录如下：

从统计结果来看，uni-app的vue3.x版本，在小程序平台上也有大幅瘦身。 关于vue小程序框架和vuejs 小程序的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 vue小程序框架的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vuejs 小程序、vue小程序框架的信息别忘了在本站进行查找喔。
本文目录一览：
- 1、推荐两个微信小程序开发框架
- 2、几款实用的VUE移动端UI框架
- 3、微信小程序框架解析
- 4、前端Vue.js框架是什么？
- 5、小程序的 iview Weapp 组件库的使用
- 6、uniappvue3vue2性能
推荐两个微信小程序开发框架
下面是最近了解的，开发者使用较多的框架：1. WePY
WePY属腾讯系，是一款组件化的开发框架，比原生小程序的开发模式更接近于MVVM ，它类Vue的开发风格，让Vue开发者很容易上手。
Github地址: https://github.com/Tencent/wepy
官网地址：https://tencent.github.io/wepy
2. mpvue
mpvue 是美团点评开源的一个使用Vue.js开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。
Github：https://github.com/Meituan-Dianping/mpvue
官网：http://mpvue.com/
几款实用的VUE移动端UI框架
文档地址：https://doc.vux.li/zh-CN/演示地址：https://vux.li/demos/v2/?x-page=v2-doc-home#/
基于webpack+vue-loader+vux可以快速开发移动端页面，配合vux-loader方便你在WeUI的基础上定制需要的样式（下拉刷新上拉加载组件不再维护，其余组件相对丰富）
文档地址：https://wangdahoo.github.io/vonic-documents/#/
演示地址：https://wangdahoo.github.io/vonic/docs/#/home
一个基于 vue.js 和 ionic 样式的 UI 框架，用于快速构建移动端单页应用，很简约
文档地址：https://didi.github.io/cube-ui/#/zh-CN/docs/introduction
演示地址：https://didi.github.io/cube-ui/#/zh-CN/example
滴滴 WebApp 团队 实现的 基于 Vue.js 实现的精致移动端组件库；组件效果优；视觉效果很棒
文档地址：http://mint-ui.github.io/docs/#/
演示地址：http://elemefe.github.io/mint-ui/#/
最接近原生APP体验的高性能前端框架
文档地址：https://youzan.github.io/vant/#/zh-CN/intro
演示地址：https://youzan.github.io/vant/mobile.html#/zh-CN/
有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件
文档：http://nutui.jd.com/#/intro
演示地址：http://nutui.jd.com/demo.html#/index
一套京东风格的轻量级移动端Vue组件库
特性
跨平台，自动转微信小程序组件（稍后上线，敬请期待）
30+ 京东移动端项目正在使用
基于京东APP 7.0 视觉规范
支持按需加载
详尽的文档和示例
支持定制主题
支持多语言（国际化）
支持 TypeScript
支持服务端渲染（Vue SSR）
单元测试加持
配套有基于Webpack的构建工具，可快速创建已内置本组件库的Vue工程
微信小程序框架解析
微信小程序框架（Vue.js）小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。在刚接触微信小程序的时候，就是官方提供的这个框架，其实该框架的思想和vue还是有相似之处，正所谓万变不离其宗。只不过这个框架就是直接使用微信小程序所需要的wxml、wxss等文件，而其他框架最终打包生成的文件才是官方所需要的。所以我建议就是初学者，还是可以先使用或学习下该框架，更能直接的了解小程序和学习。所以初学者值得推荐。前端Vue.js框架是什么？
前端Vue.js框架是什么？有哪些特点？Vue.js是一个前端框架，用于构建用户界面的渐进式框架。在Vue中一个核心的概念是让用户不再操作DOM元素解放了用户的双手，让程序员可以更多的时间去关注业务逻辑，Vue框架能够提高开发的效率。
科普时刻 ：
黑马程序员vue前端基础教程-4个小时带你快速入门vue
前端开发利器vue，微信小程序快速开发实战
web前端基础必备教程-2小时玩转Vue单元测试
黑马程序员Vue2.0+Vue3.0入门到精通，大厂前端岗位必备技能
1、Vue.js是什么？
Vue是一个js库，且无依赖别的js库跟jquery差不多。Vue核心库只关注视图层，非常容易与其它库或已有项目整合。Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。
Vue.是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
2、Vue的MVVM设计模式是什么？
如果了解前端一定知道MVVM和MVC这两种设计模式，且很有可能对mvp也有一些了解。MVC即model，view，control，jQuery就是采用的这种设计模式。MVVM即model，view，viewmodel，是数据驱动模式，即所有的一切通过操作数据来进行而尽量避免操作DOM树。
不关注DOM结构，考虑数据该如何储存，用户的操作在view通过viewmodel进行数据处理，分情况是否通过ajax与model层进行交互，再返回到view层，在这个过程中view和viewmodel的数据双向绑定使得我们完全的摆脱了对DOM的繁琐操作，而是专心于对用户的操作进行处理，避免MVC中control层过厚的问题。
在vue调试方面可以选择安装chrome插件vue Devtools。打开vue项目，在console控制台选择vue面板。在Devtools对象中，可以选择组件，查看对应组件内的数据信息。也可以选择Vuex选项，查看该项目内Vuex的状况变量信息。
3、Vue.js有哪些优点？
声明式，响应式的数据绑定；组件化的开发；Virtual DOM；响应式的数据绑定
（1）jQuery首先获取到DOM对象，然后对DOM对象进行进行值的修改等操作；
（2）Vue首先把值和js对象进行绑定，然后修改js对象值，Vue框架会自动把DOM的值就行更新；
（3）简单理解为Vue帮我们做了DOM操作，以后用Vue就需要修改对象的值和做好元素和对象的绑定，Vue框架会自动做好DOM相关操作；
（4）DOM元素跟随JS对象值的变化而变化叫做单向数据绑定，若JS对象的值也跟随着DOM元素。
4、需要学习哪些Vue.js框架相关知识点？
Vue.js 安装、Vue.js 目录结构、Vue.js 起步、Vue.js 模板语法、Vue.js 条件语句、Vue.js 循环语句、Vue.js 计算属性、Vue.js 监听属性、Vue.js 样式绑定、Vue.js 事件处理器、Vue.js 表单、Vue.js 组件、Vue.js 组件自定义事件、Vue.js 自定义指令、Vue.js 路由、Vue.js 过渡 动画、Vue.js 混入、Vue.js Ajax(axios)、Vue.js Ajax(vue-resource)、Vue.js 响应接口、Vue.js 实例等。
Vue.js 是一个JavaScriptMVVM库，一套构建用户界面的渐进式框架。以数据驱动和组件化的思惟构建的，采取自底向上增量开辟的设计。比拟于Angular.js，Vue.js供给了加倍简洁、更易于懂得的API，使得我们快速地上手并应用Vue.js。
小程序的 iview Weapp 组件库的使用
iview 这个 UI 框架想必大家都很熟了，这个搞 Vue 框架的基本素养。下面来看看小程序版的。商城小程序必备的数字输入框。
在 .json 中引入组件
在 .wxml 中引入
下面是运行的效果，总的来看还是不错的。
还有个常用的动作面板。
从底部弹出的模态框，提供和当前场景相关的 2 个以上的操作动作，也支持提供标题和描述。内置固定的展示样式、不支持特别灵活的修改。
在 .json 中引入组件
在 .wxml 中引入组件
这个动作面板和微信小程序原生的动作面板有啥视觉的区别，一起来看看：
总的来讲 iview 还比较好看的。
更多用法去参考： https://weapp.iviewui.com/
另外有赞出品的 vant 框架小程序版，使用方法去看 小程序如何使用 npm 工具
uniappvue3vue2性能
新版 uni-app 框架主要做了三大改进：重写框架内核：基于vue3 + ts重写内置组件和API，实现更彻底、更高效的tree-shaking；
新增支持 Vite 构建工具，在H5平台实现秒开预览；
新增支持 Vue3.x，实现更灵活的开发方式，及更高的运行性能；
基于这三大改进，uni-app项目获得了多快好省四大收益：
更多的语法支持，支持组合式API，业务聚焦，开发效率更高；
更快的编译速度，H5平台十倍加速，小程序、App加速30%以上；
更好的运行性能，用户端响应更快，体验更好；
更小的代码体积，瘦身30%以上，更省体积、更省流量
更多的语法支持
新版uni-app支持Vue 3.x框架，支持组合式API，可实现更聚焦的业务开发。
Vue 3.x的一些新增特性，uni-app也已经完全支持，如：
支持<script setup
支持<style scoped、<style module、State-Driven Dynamic CSS(v-bind)
支持jsx、tsx（h5,app 平台支持，小程序不支持）
另外，在小程序平台，新版uni-app也扩展了更多的语法，如：
更完善的模板语法支持（如 class、style 支持函数、变量等，不再局限数组、对象类型）
更完整的 props 支持（如传递函数）
更完善的 slot 支持（如作用域插槽）
更快的编译速度
开发者日常工作中，最无聊的就是等待编译构建。
某乎上还有一个”程序员在等待编译的时候都做什么？“的讨论帖，可见编译时间对开发者而言，是一个多么尴尬无聊的碎片时间。
uni-app本次升级vue3 Vite后，在编译时间上有多少改进？带给开发者多少福利？我们安排真实测试，以数据说话。
测试环境说明：
硬件：RedmiBook 14 二代
处理器：Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz
内存：16.0 GB
操作系统：Windows 11 专业版 64 位操作系统
关于编译速度，我们做了两个维度的对比：
纵向对比：挑选uni-app常用项目模板，在H5、小程序、App平台，分别测试vue 2.6和vue 3.x的编译时间
横向对比：使用业内优秀的其它跨端框架，创建默认项目模板，记录其编译时间，和uni-app的vue 3.x版本进行对比
uni-app 历史版本纵向对比
我们选择uni-app默认模板、uni-starter、hello-uniapp三个项目模板，分别测试vue 2.6和vue 3.x的编译时间。
uni-app项目编译时间的采集方式：
vue 2.6版本编译时间 = webpack 的 stats.endTime - stats.startTime
vue 3.x版本编译时间 = 构建工具入口处记录 global.vite_start_time = performance.now()，构建工具编译完成时：performance.now() - global.vite_start_time
H5平台
对uni-app的三个项目模板分别运行到H5平台，进行多次编译测试，并求其均值后，获得如下数据：

由此，我们可以观察到：
在vue 2.6环境下，随着项目复杂度的提升，H5首页预览所需编译时间会直线增加；这是因为在vue 2.6版本下，虽然仅预览首页，但依然会使用 webpack 编译整个项目资源；故项目越复杂，编译时间越长；
在vue 3.x环境下，H5首页预览的编译时间跟项目复杂度也有关系，但增幅不大；这是因为在vue 3.x版本下，使用 Vite 进行构建，预览首页时仅编译首页及首页所依赖资源，不会编译其它页面资源。
通过图表对比，我们可以直观得出结论：vue 3.x环境下的首页编译时间，平均不到vue 2.6环境下的十分之一。
换言之，vue 3.x版本下的首页编译速度，相比vue 2.6版本，有十倍效率提升。
这个十倍效率提升，主要得益于新版采用Vite作为构建工具，由此带来了两大好处：
使用原生 ESM 文件，无需打包，实现极速的服务启动；
预览（运行）使用esbuild作为打包工具，相比vue 2.6环境下的webpack，构建速度快 10-100 倍（这不是我们夸大，详见esbuild）
本着这个十倍效率提升，小伙伴们还不赶紧上手试试？
小程序平台
对uni-app的三个模板项目运行到小程序平台，多次编译测试，并求其均值后，获得如下数据：

从上图对比数据来看，我们可以得出结论：小程序平台，vue 3.x版本下的运行编译，相比vue 2.6版本，编译性能至少提升30%；且项目越复杂，编译性能提升越明显，可以达到40% ~ 50%。
App平台
对uni-app的三个项目模板继续运行到App平台，多次编译测试，并求其均值后，获得如下数据：

从上图对比数据来看，我们可以得出结论：App平台，vue 3.x版本下的运行编译，相比vue 2.6版本，编译性能提升将近50%。
虽没有H5平台的十倍效率提升那么刺激，但将近50%的速度提升，经常开发小程序/App的小伙伴，还不心动？
业内优秀框架横向对比
除了采用不同版本的uni-app进行纵向对比外，我们还使用业内优秀的跨端框架Taro，创建空的项目模板，进行横向对比测试。
具体测试方案：
安装Taro的最新cli，本文测试时使用的版本为"@Tarojs/Taro": "3.3.16"
使用Taro init命令，分别选择react、vue、vue3框架，创建三个默认项目模板，三个项目名称分别为taro3-react、taro3-vue、taro3-vue3，如下图：

使用npm run dev:h5，运行到H5平台进行预览，记录每次预览编译时间，重复执行，求其均值
关于Taro编译时间的计算方案：
开发一个Taro扩展插件，插件规范参考Taro官网 - 插件功能
在ctx.onBuildStart中记录开始编译时间
在ctx.onBuildFinish中记录编译结束时间
两者的时间差，即为编译过程消耗时间
然后使用uni-app的cli命令行，创建基于vue3.x的空项目模板，项目命名为uni-app-vue3。
我们使用各自框架的命令行，将如上创建的5个项目分别编译到H5平台和小程序平台，多次测试，并求其均值。
同框架版本在H5平台上的编译时间，结果如下：

从图中可以看出，uni-app的vue3版本，在H5平台上的首页编译预览性能是遥遥领先的。这个遥遥有多远呢？这么讲吧，你都编译20次了，友商第一次还没完呢。
继续编译到小程序平台，多次测试，求其均值，结果如下：

从图中可以看出，uni-app的vue3版本，在小程序平台上的编译性能也是遥遥领先的，这个遥遥也不近。
更好的运行速度
开发环节编译快了，那面向最终用户的软件，运行性能怎么样？
我们进入性能测试章节。
测试方案：
开发内容：开发一个仿微博小程序首页的复杂长列表，支持下拉刷新、上拉翻页、点赞。
界面如下：

测试机型：小米 Mi 10 pro、MIUI 12.5 (21.11.3 开发版) 、微信版本 8.0.16
准备工作：每次开始测试前，杀掉各App进程、清空内存，保证测试机环境基本一致；每次从本地读取静态数据，屏蔽网络差异。
评测点：长列表中的某个组件，比如点赞组件，点击时是否能及时的修改未赞和已赞状态？
测试计时方式：
选中某微博，点击“点赞”按钮，实现点赞状态状态切换（已赞高亮、未赞灰色），
点赞按钮 onclick函数开头开始计时，setData回调函数开头结束计时；
在小米手机上进行多次测试，求其平均值，结果如下：
记录条数 200 400 600 800 1000
vue2 30ms 43ms 56ms 72ms 90ms
vue3 8ms 9ms 9ms 8ms 9ms
从表格中可以看出：
随着页面记录的增加，vue 2.6版本的uni-app项目，点赞组件响应时间快速增加，响应越来越慢；
基于vue 3.x的uni-app项目，点赞组件的响应时间跟页面条数无关，一直保持极高的响应灵敏度，性能体验远高于vue 2.6版本。
从这个常见的长列表组件响应实验来看，vue 3.x的性能体验要远高于vue 2.6版本。
更小的代码体积
项目发行后的代码体积，是一个很重要的考量指标：
H5平台：更小的代码体积，可以帮助开发者节省服务端带宽及CDN流量，可实现更快的资源加载及页面渲染；
小程序平台：更小的代码体积，可加速小程序包的-（甚至可能免了分包加载的繁琐），帮助用户更快进入小程序业务界面；
App平台：更小的代码体积，可实现更快的App启动，帮助用户更快进入App首页
为了测试vue 3.x新版升级后，代码体积的变化，我们同样做了两个维度的测试：
纵向对比：选择uni-app常用项目模板，在H5、小程序、App平台，分别测试vue 2.6和vue 3.x的编译包大小
横向对比：使用业内优秀的其它跨端框架，创建默认项目模板，记录其编译后的包体积大小，和uni-app版本进行对比
Tips：
开发阶段重在编译速度，对应npm run dev操作
发行阶段重在编译包大小，对应npm run build操作
uni-app 不同版本纵向对比
我们复用之前创建的uni-app默认模板、uni-starter、hello-uniapp三个项目模板，分别测试vue 2.6和vue 3.x的编译包体积。
uni-app项目编译包体积的采集方式：编译到对应平台后，记录编译后文件夹的大小。
H5平台
H5平台编译后代码体积记录如下：

从统计结果来看，uni-app的vue3.x版本，在H5平台上的编译包体积至少瘦身30%以上。
H5平台的瘦身优化，主要得益于uni-app框架的底层全面重构，实现了更彻底的摇树优化。
小程序平台
小程序平台编译后代码体积记录如下：

从统计结果来看，uni-app的vue3.x版本，在小程序平台上也有大幅瘦身。 关于vue小程序框架和vuejs 小程序的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 vue小程序框架的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vuejs 小程序、vue小程序框架的信息别忘了在本站进行查找喔。
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
相关文章
发表评论
最近发表
推荐文章
热评文章
暂时没有评论，来抢沙发吧~