vue画心电图（canvas画心电图）

大家好！今天让创意岭的小编来大家介绍下关于vue画心电图的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。

ChatGPT国内免费在线使用，一键生成原创文章、方案、文案、工作计划、工作报告、论文、代码、作文、做题和对话答疑等等

只需要输入关键词，就能返回你想要的内容，越精准，写出的就越详细，有微信小程序端、在线网页版、PC客户端

官网：https://ai.de1919.com

本文目录:

• 1、Ionic vue 初探

• 2、vue-like（点赞）组件的封装

• 3、React 18 发布、Vue 3、Vitest、Pinia 正式成为 Vue 官方推荐的状态

• 4、uniappvue3vue2性能

一、Ionic vue 初探

Ionic 是一个广为人知的桥接app开发方案，它丰富的组件以及完善的文档，对于快速开发app是一种好的选择。然而不同的人使用的技术栈不一样， Ionic 组件已经可以和 Vue 集成，对于使用 Vue 开发移动端应用的同学来说，多了一种选择。

github地址

本篇主要参照Youtube视频: https://www.youtube.com/watch?v=6H1wftPS0oo

在弹出的 preset 选择中，选择 `default (babel, eslint)

创建成功之后，进入到 ionic-vue-test 工作路径中，安装 @ionic/vue ，并且添加 router

使用 vscode 打开 ionic-vue-test 路径，打开 main.js 文件，改造为

对于 router ，使用基于 VueRouter 的 IonicVueRouter ，改造 router.js

相应的，去掉 App.vue 中的内容，使用 <ion-app> 包装， <ion-app> 代表 ionic 应用的入口

现在即可以放心的使用 Ionic 中的组件啦。在 Home.vue 中，删除原来的内容，改造为

执行效果贴图

欢迎留言讨论!

二、vue-like（点赞）组件的封装

写仿豆瓣的时候经常会遇到一个点赞的按钮，点一下赞了 它的样式也改变了，然后再点一下还可以取消。于是打算封装一个点赞的组件

刚开始封装的时候将每次点赞和取消点赞的这个逻辑写到了组件内部，后来再看感觉很不合理，所以重新重构了一下。

template：

<div id="like" :class="like?'active':''" @click="change">

<span class="img"></span><span>{{count}}</span>

</div>

img是显示的小心心的点赞图标，后面是点赞数量，因为想到有些点赞按钮可能没有数量，所以count设置为非必填项。

style：

#like{

width: 100px;

height: 30px;

line-height: 30px;

display: flex;

align-items:center;

justify-content:center;

font-size: 15px;

margin: 30px auto;

color: #42bd56;

border: 1px solid #42bd56;

}

#like .img{

margin-right: 4px;

width: 20px;

height: 20px;

background:url(https://img3.doubanio.com/f/talion/c689ab2369da387f2cb0d4da4a22614d7f048bf9/pics/card/ic_heart_green.svg) no-repeat;

}

#like.active{

color: #333;

border: 1px solid #bfbfbf;

}

#like.active .img{

background-image: url(https://img3.doubanio.com/f/talion/0129352875382ff0544020161709c2ae9b00c737/pics/card/ic_heart_red.svg);

}

样式当时写的是比较随意的，点赞的小图标是直接用的豆瓣的图片。。

script：

分开说吧

props 

props:{

count:{

type: Number,

required: false,

},

like:{

type:Boolean,

required:true,

default:false

}

}

因为count可能没有，所以非必填，like涉及到显示效果，给他设置了个默认值。

正常来说其实这个组件中是不需要写逻辑的，但是这里有个问题就是vue2.0中给自定义组件设置原生事件一定要加native修饰符，那如果使用的时候父组件忘记了呢？所以这里给这个组件设定了个点击事件

这个change方法里其实只做了一件事

change:function () {

this.$emit('click');

}

就是触发父组件传递进来的方法。

所以父组件如果这样使用

<div class="like">

<Like-it @click="changeValue" count="15" :like="like"></Like-it>

</div>

也不会有任何问题了。

当然如果确保可以在父组件中使用@click.native来触发原生事件，则组件的上面的操作都可以省略了。

三、React 18 发布、Vue 3、Vitest、Pinia 正式成为 Vue 官方推荐的状态

Pinia 终于转正了，它具有与 Vuex 5 几乎完全相同或者增强的 API，简单来说，它就是和 Vuex 5 名字不同。Vuex 3 和 4 仍会继续维护，但是新功能不太可能会添加了。Pinia 也支持渐进式迁移，Vuex 和 Pinia 可以安装在同一个项目中，新项目的话建议直接使用 Pinia。

Vite 发布了 v2.9.0。

React 18 终于发布了，官方团队从 v16 就开始普及并发概念，到正式版发布时难免少了一些新鲜感。照目前的发展趋势看，React 未来会朝着前端底层“操作系统”的方向发展，会变得越来越复杂。这些复杂的操作又会被元框架(Next.js、Remix)消化掉，开发者并不会直接接触，使用这些元框架开发即可。

稳定不停滞，支持增量升级，v5、v6 的版本代码可以同时存在。

下面是其他的发布信息和 TC39 提案的一些推进情况，大家可以找感兴趣的自行查阅。

下面我们来看技术资料。

和好朋友卡颂一起在做的项目： 前端赏金猎人 。

这是一个用单纯的金钱关系维系的前端学习社区，悬赏答题 + 答题赚钱。

期待你的加入，如果觉得有价值的话，可以给个 Star 鼓励一下。

把技术名词的大小写拼写正确是基本的素养，但很多人都不重视，这个项目可以帮助你纠正错误的大小写。

免费的编程中文书籍索引，项目已有 90.1k Star。

从 2008 年谷歌浏览器推出至今的 100 个精彩瞬间回 忆录。

在这里插入图片描述

Pinia 是 Vue.js 的轻量级状态管理库，最近很受欢迎。它使用 Vue 3 中的新反应系统来构建一个直观且完全类型化的状态管理库。

Pinia的成功可以归功于其管理存储数据的独特功能（可扩展性、存储模块组织、状态变化分组、多存储创建等）。

另一方面，Vuex也是为Vue框架建立的一个流行的状态管理库，它也是Vue核心团队推荐的状态管理库。 Vuex高度关注应用程序的可扩展性、开发人员的工效和信心。它基于与Redux相同的流量架构。

在这篇文章中，我们将对Pinia和Vuex进行比较。我们将分析这两个框架的设置、社区优势和性能。我们还将看一下Vuex 5与Pinea 2相比的新变化。

Pinia 设置

Pinia 很容易上手，因为它只需要安装和创建一个store。

要安装 Pinia，您可以在终端中运行以下命令：

该版本与Vue 3兼容，如果你正在寻找与Vue 2.x兼容的版本，请查看v1分支。

Pinia是一个围绕Vue 3 Composition API的封装器。因此，你不必把它作为一个插件来初始化，除非你需要Vue devtools支持、SSR支持和webpack代码分割的情况：

在上面的片段中，你将Pinia添加到Vue.js项目中，这样你就可以在你的代码中使用Pinia的全局对象。

为了创建一个store，你用一个包含创建一个基本store所需的states、actions和getters的对象来调用 defineStore 方法。

Vuex 也很容易设置，需要安装和创建store。

要安装Vuex，您可以在终端中执行以下命令：

要创建store，你可以使用包含创建基本store所需的states、actions和 getter 的对象调用 createStore 方法：

要访问 Vuex 全局对象，需要在 Vue.js 项目根文件中添加 Vuex，如下所示：

使用 Pinia，可以按如下方式访问该store：

请注意，在访问其属性时省略了 store 的 state 对象。

使用Vuex，可以按如下方式访问store：

这两个状态管理库都相当容易学习，因为它们在 YouTube 和第三方博客上都有很好的文档和学习资源。对于以前有使用 Redux、MobX、Recoil 等 Flux 架构库经验的开发人员来说，他们的学习曲线更容易。

这两个库的文档都很棒，并且以对经验丰富的开发人员和新开发人员都友好的方式编写。

Pinia和Vuex都非常快，在某些情况下，使用Pinia的web应用程序会比使用Vuex更快。这种性能的提升可以归因于Pinia的极轻的重量，Pinia体积约1KB。

尽管Pinia是在Vue devtools的支持下建立的，但由于Vue devtools没有暴露出必要的API，所以一些功能如时间旅行和编辑仍然不被支持。当开发速度和调试对你的项目来说更重要时，这是值得注意的。

Pinia 将这些与 Vuex 3 和 4 进行了比较：

这些是Pinia在其状态管理库和Vuex之间的比较中提出的额外见解：

将 Pinia 2（目前处于 alpha 阶段）与 Vuex 进行比较，我们可以推断出 Pinia 领先于 Vuex 4。

Vue.js核心团队为Vuex 5制定了一个开放的RFC，类似于Pinia使用的RFC。目前，Vuex通过RFC来尽可能多地收集社区的反馈。希望Vuex 5的稳定版本能够超越Pinea 2。

据同时也是 Vue.js 核心团队成员并积极参与 Vuex 设计的 Pinia 的创建者（Eduardo San Martin Morote）所说，Pania 和 Vuex 的相似之处多于不同之处：

尽管 Pinia 足以取代 Vuex，但取代 Vuex 并不是它的目标，因此 Vuex 仍然是 Vue.js 应用程序的推荐状态管理库。

根据我的个人经验，由于Pinea是轻量级的，体积很小，它适合于中小型应用。它也适用于低复杂度的Vue.js项目，因为一些调试功能，如时间旅行和编辑仍然不被支持。

将 Vuex 用于中小型 Vue.js 项目是过度的，因为它重量级的，对性能降低有很大影响。因此，Vuex 适用于大规模、高复杂度的 Vue.js 项目。

批处理是 React将多个状态更新分组到单个重新渲染中以获得更好的性能。

例如，如果你在同一个点击事件中有两个状态更新，React 总是将它们分批处理到一个重新渲染中。如果你运行下面的代码，你会看到每次点击时，React 只执行一次渲染，尽管你设置了两次状态：

这对性能非常有用，因为它避免了不必要的重新渲染。它还可以防止你的组件呈现仅更新一个状态变量的“半完成”状态，这可能会导致错误。

这可能会让你想起餐厅服务员在你选择第一道菜时不会跑到厨房，而是等你完成订单。

然而，React 的批量更新时间并不一致。例如，如果你需要获取数据，然后更新handleClick上面的状态，那么 React不会批量更新，而是执行两次独立的更新。

这是因为 React 过去只在浏览器事件（如点击）期间批量更新，但这里我们在事件已经被处理（在 fetch 回调中）之后更新状态：

在 React 18 之前，我们只在 React 事件处理程序期间批量更新。默认情况下，React 中不会对 promise、setTimeout、本机事件处理程序或任何其他事件中的更新进行批处理。

从 React 18 开始createRoot，所有更新都将自动批处理，无论它们来自何处。

这意味着超时、承诺、本机事件处理程序或任何其他事件内的更新将以与 React 事件内的更新相同的方式进行批处理。

我们希望这会导致更少的渲染工作，从而在你的应用程序中获得更好的性能：

注意：作为采用 React 18 的一部分，预计你将升级到createRoot。旧行为的render存在只是为了更容易地对两个版本进行生产实验。

无论更新发生在何处，React 都会自动批量更新，因此：

行为与此相同：

通常，批处理是安全的，但某些代码可能依赖于在状态更改后立即从 DOM 中读取某些内容。对于这些用例，你可以使用ReactDOM.flushSync()选择退出批处理：

2、Suspense 的 SSR 支持

这基本上是服务器端渲染 (SSR) 逻辑的扩展。在典型的 React SSR 应用程序中，会发生以下步骤：

典型 SSR 应用程序的问题在于，在下一步可以开始之前，必须立即完成整个应用程序的每个步骤。这会使您的应用程序在初始加载时变慢且无响应。

React 18 正试图解决这个问题。 组件已经以这样的方式进行了革命性的改变，它将应用程序分解为更小的独立单元，这些单元经过提到的每个步骤。这样一旦用户看到内容，它就会变成互动的。

我们将状态更新分为两类：

单击、悬停、滚动或打字等紧急更新需要立即响应以匹配我们对物理对象行为方式的直觉。否则他们会觉得“错了”。

然而，转换是不同的，因为用户不希望在屏幕上看到每个中间值。

例如，当您在下拉列表中选择过滤器时，您希望过滤器按钮本身在您单击时立即响应。但是，实际结果可能会单独转换。

一个小的延迟是难以察觉的，而且通常是预料之中的。如果在结果渲染完成之前再次更改过滤器，您只关心看到最新的结果。

在典型的 React 应用程序中，大多数更新在概念上都是过渡更新。但出于向后兼容性的原因，过渡是可选的。

默认情况下，React 18 仍然将更新处理为紧急更新，您可以通过将更新包装到startTransition.

构建流畅且响应迅速的应用程序并不总是那么容易。有时，诸如单击按钮或输入输入之类的小动作可能会导致屏幕上发生很多事情。这可能会导致页面在所有工作完成时冻结或挂起。

例如，考虑在过滤数据列表的输入字段中键入。您需要将字段的值存储在 state 中，以便您可以过滤数据并控制该输入字段的值。您的代码可能如下所示：

在这里，每当用户键入一个字符时，我们都会更新输入值并使用新值来搜索列表并显示结果。

对于大屏幕更新，这可能会导致页面在呈现所有内容时出现延迟，从而使打字或其他交互感觉缓慢且无响应。

即使列表不是太长，列表项本身也可能很复杂并且每次击键时都不同，并且可能没有明确的方法来优化它们的呈现。

从概念上讲，问题在于需要进行两种不同的更新。第一个更新是紧急更新，用于更改输入字段的值，以及可能会更改其周围的一些 UI。

第二个是显示搜索结果的不太紧急的更新。

用户希望第一次更新是即时的，因为这些交互的本机浏览器处理速度很快。但是第二次更新可能会有点延迟。

用户不希望它立即完成，这很好，因为可能有很多工作要做。（实际上，开发人员经常使用去抖动等技术人为地延迟此类更新。）

在 React 18 之前，所有更新都被紧急渲染。

这意味着上面的两个状态仍然会同时呈现，并且仍然会阻止用户看到他们交互的反馈，直到一切都呈现出来。我们缺少的是一种告诉 React 哪些更新是紧急的，哪些不是的方法。

新startTransitionAPI 通过让您能够将更新标记为“转换”来解决此问题：

包装在其中的更新startTransition被视为非紧急处理，如果出现更紧急的更新（如点击或按键），则会中断。

如果用户中断转换（例如，连续输入多个字符），React 将抛出未完成的陈旧渲染工作，仅渲染最新更新。

Transitions 可让您保持大多数交互敏捷，即使它们导致显着的 UI 更改。它们还可以让您避免浪费时间渲染不再相关的内容。

上述问题的一个常见解决方案是将第二次更新包装在 setTimeout 中：

这将延迟第二次更新，直到呈现第一次更新之后。节流和去抖动是这种技术的常见变体。

一个重要的区别是startTransition不安排在以后喜欢的setTimeout是。它立即执行。传递给的函数startTransition同步运行，但其中的任何更新都标记为“转换”。

React 将在稍后处理更新时使用此信息来决定如何呈现更新。这意味着我们比在超时中包装更新更早地开始呈现更新。

在快速设备上，两次更新之间的延迟非常小。在较慢的设备上，延迟会更大，但 UI 会保持响应。

另一个重要的区别是 a 内的大屏幕更新setTimeout仍然会锁定页面，只是在超时之后。

如果用户在超时触发时仍在键入或与页面交互，他们仍将被阻止与页面交互。但是标记为 的状态更新startTransition是可中断的，因此它们不会锁定页面。

它们让浏览器在呈现不同组件之间的小间隙中处理事件。

如果用户输入发生变化，React 将不必继续渲染用户不再感兴趣的内容。

最后，因为setTimeout只是延迟更新，显示加载指示器需要编写异步代码，这通常很脆弱。

通过转换，React 可以为您跟踪挂起状态，根据转换的当前状态更新它，并让您能够在用户等待时显示加载反馈。

您可以使用startTransition来包装要移动到后台的任何更新。通常，这些类型的更新分为两类：

总结

React 18 没有任何重大更改，因此，我们将当前的存储库升级到最新版本几乎不需要更改代码，但我们可以享受它们很酷的功能。

四、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画心电图相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。

推荐阅读：

前端vue低代码开发平台（vue 低代码平台）

vue画心电图（canvas画心电图）

域名证书多少钱一年（域名证书费用）

抖音口播什么意思？抖音口播有哪些类型？