vue畫心電圖（canvas畫心電圖）

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于vue畫心電圖的問題，以下是小編對(duì)此問題的歸納整理，讓我們一起來看看吧。

ChatGPT國內(nèi)免費(fèi)在線使用，一鍵生成原創(chuàng)文章、方案、文案、工作計(jì)劃、工作報(bào)告、論文、代碼、作文、做題和對(duì)話答疑等等

只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準(zhǔn)，寫出的就越詳細(xì)，有微信小程序端、在線網(wǎng)頁版、PC客戶端

官網(wǎng)：https://ai.de1919.com

本文目錄:

• 1、Ionic vue 初探

• 2、vue-like（點(diǎn)贊）組件的封裝

• 3、React 18 發(fā)布、Vue 3、Vitest、Pinia 正式成為 Vue 官方推薦的狀態(tài)

• 4、uniappvue3vue2性能

一、Ionic vue 初探

Ionic 是一個(gè)廣為人知的橋接app開發(fā)方案，它豐富的組件以及完善的文檔，對(duì)于快速開發(fā)app是一種好的選擇。然而不同的人使用的技術(shù)棧不一樣， Ionic 組件已經(jīng)可以和 Vue 集成，對(duì)于使用 Vue 開發(fā)移動(dòng)端應(yīng)用的同學(xué)來說，多了一種選擇。

github地址

本篇主要參照Youtube視頻: https://www.youtube.com/watch?v=6H1wftPS0oo

在彈出的 preset 選擇中，選擇 `default (babel, eslint)

創(chuàng)建成功之后，進(jìn)入到 ionic-vue-test 工作路徑中，安裝 @ionic/vue ，并且添加 router

使用 vscode 打開 ionic-vue-test 路徑，打開 main.js 文件，改造為

對(duì)于 router ，使用基于 VueRouter 的 IonicVueRouter ，改造 router.js

相應(yīng)的，去掉 App.vue 中的內(nèi)容，使用 <ion-app> 包裝， <ion-app> 代表 ionic 應(yīng)用的入口

現(xiàn)在即可以放心的使用 Ionic 中的組件啦。在 Home.vue 中，刪除原來的內(nèi)容，改造為

執(zhí)行效果貼圖

歡迎留言討論!

二、vue-like（點(diǎn)贊）組件的封裝

寫仿豆瓣的時(shí)候經(jīng)常會(huì)遇到一個(gè)點(diǎn)贊的按鈕，點(diǎn)一下贊了 它的樣式也改變了，然后再點(diǎn)一下還可以取消。于是打算封裝一個(gè)點(diǎn)贊的組件

剛開始封裝的時(shí)候?qū)⒚看吸c(diǎn)贊和取消點(diǎn)贊的這個(gè)邏輯寫到了組件內(nèi)部，后來再看感覺很不合理，所以重新重構(gòu)了一下。

template：

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

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

</div>

img是顯示的小心心的點(diǎn)贊圖標(biāo)，后面是點(diǎn)贊數(shù)量，因?yàn)橄氲接行c(diǎn)贊按鈕可能沒有數(shù)量，所以count設(shè)置為非必填項(xiàng)。

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);

}

樣式當(dāng)時(shí)寫的是比較隨意的，點(diǎn)贊的小圖標(biāo)是直接用的豆瓣的圖片。。

script：

分開說吧

props 

props:{

count:{

type: Number,

required: false,

},

like:{

type:Boolean,

required:true,

default:false

}

}

因?yàn)閏ount可能沒有，所以非必填，like涉及到顯示效果，給他設(shè)置了個(gè)默認(rèn)值。

正常來說其實(shí)這個(gè)組件中是不需要寫邏輯的，但是這里有個(gè)問題就是vue2.0中給自定義組件設(shè)置原生事件一定要加native修飾符，那如果使用的時(shí)候父組件忘記了呢？所以這里給這個(gè)組件設(shè)定了個(gè)點(diǎn)擊事件

這個(gè)change方法里其實(shí)只做了一件事

change:function () {

this.$emit('click');

}

就是觸發(fā)父組件傳遞進(jìn)來的方法。

所以父組件如果這樣使用

<div class="like">

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

</div>

也不會(huì)有任何問題了。

當(dāng)然如果確保可以在父組件中使用@click.native來觸發(fā)原生事件，則組件的上面的操作都可以省略了。

三、React 18 發(fā)布、Vue 3、Vitest、Pinia 正式成為 Vue 官方推薦的狀態(tài)

Pinia 終于轉(zhuǎn)正了，它具有與 Vuex 5 幾乎完全相同或者增強(qiáng)的 API，簡單來說，它就是和 Vuex 5 名字不同。Vuex 3 和 4 仍會(huì)繼續(xù)維護(hù)，但是新功能不太可能會(huì)添加了。Pinia 也支持漸進(jìn)式遷移，Vuex 和 Pinia 可以安裝在同一個(gè)項(xiàng)目中，新項(xiàng)目的話建議直接使用 Pinia。

Vite 發(fā)布了 v2.9.0。

React 18 終于發(fā)布了，官方團(tuán)隊(duì)從 v16 就開始普及并發(fā)概念，到正式版發(fā)布時(shí)難免少了一些新鮮感。照目前的發(fā)展趨勢看，React 未來會(huì)朝著前端底層“操作系統(tǒng)”的方向發(fā)展，會(huì)變得越來越復(fù)雜。這些復(fù)雜的操作又會(huì)被元框架(Next.js、Remix)消化掉，開發(fā)者并不會(huì)直接接觸，使用這些元框架開發(fā)即可。

穩(wěn)定不停滯，支持增量升級(jí)，v5、v6 的版本代碼可以同時(shí)存在。

下面是其他的發(fā)布信息和 TC39 提案的一些推進(jìn)情況，大家可以找感興趣的自行查閱。

下面我們來看技術(shù)資料。

和好朋友卡頌一起在做的項(xiàng)目： 前端賞金獵人 。

這是一個(gè)用單純的金錢關(guān)系維系的前端學(xué)習(xí)社區(qū)，懸賞答題 + 答題賺錢。

期待你的加入，如果覺得有價(jià)值的話，可以給個(gè) Star 鼓勵(lì)一下。

把技術(shù)名詞的大小寫拼寫正確是基本的素養(yǎng)，但很多人都不重視，這個(gè)項(xiàng)目可以幫助你糾正錯(cuò)誤的大小寫。

免費(fèi)的編程中文書籍索引，項(xiàng)目已有 90.1k Star。

從 2008 年谷歌瀏覽器推出至今的 100 個(gè)精彩瞬間回 憶錄。

在這里插入圖片描述

Pinia 是 Vue.js 的輕量級(jí)狀態(tài)管理庫，最近很受歡迎。它使用 Vue 3 中的新反應(yīng)系統(tǒng)來構(gòu)建一個(gè)直觀且完全類型化的狀態(tài)管理庫。

Pinia的成功可以歸功于其管理存儲(chǔ)數(shù)據(jù)的獨(dú)特功能（可擴(kuò)展性、存儲(chǔ)模塊組織、狀態(tài)變化分組、多存儲(chǔ)創(chuàng)建等）。

另一方面，Vuex也是為Vue框架建立的一個(gè)流行的狀態(tài)管理庫，它也是Vue核心團(tuán)隊(duì)推薦的狀態(tài)管理庫。 Vuex高度關(guān)注應(yīng)用程序的可擴(kuò)展性、開發(fā)人員的工效和信心。它基于與Redux相同的流量架構(gòu)。

在這篇文章中，我們將對(duì)Pinia和Vuex進(jìn)行比較。我們將分析這兩個(gè)框架的設(shè)置、社區(qū)優(yōu)勢和性能。我們還將看一下Vuex 5與Pinea 2相比的新變化。

Pinia 設(shè)置

Pinia 很容易上手，因?yàn)樗恍枰惭b和創(chuàng)建一個(gè)store。

要安裝 Pinia，您可以在終端中運(yùn)行以下命令：

該版本與Vue 3兼容，如果你正在尋找與Vue 2.x兼容的版本，請(qǐng)查看v1分支。

Pinia是一個(gè)圍繞Vue 3 Composition API的封裝器。因此，你不必把它作為一個(gè)插件來初始化，除非你需要Vue devtools支持、SSR支持和webpack代碼分割的情況：

在上面的片段中，你將Pinia添加到Vue.js項(xiàng)目中，這樣你就可以在你的代碼中使用Pinia的全局對(duì)象。

為了創(chuàng)建一個(gè)store，你用一個(gè)包含創(chuàng)建一個(gè)基本store所需的states、actions和getters的對(duì)象來調(diào)用 defineStore 方法。

Vuex 也很容易設(shè)置，需要安裝和創(chuàng)建store。

要安裝Vuex，您可以在終端中執(zhí)行以下命令：

要?jiǎng)?chuàng)建store，你可以使用包含創(chuàng)建基本store所需的states、actions和 getter 的對(duì)象調(diào)用 createStore 方法：

要訪問 Vuex 全局對(duì)象，需要在 Vue.js 項(xiàng)目根文件中添加 Vuex，如下所示：

使用 Pinia，可以按如下方式訪問該store：

請(qǐng)注意，在訪問其屬性時(shí)省略了 store 的 state 對(duì)象。

使用Vuex，可以按如下方式訪問store：

這兩個(gè)狀態(tài)管理庫都相當(dāng)容易學(xué)習(xí)，因?yàn)樗鼈冊(cè)?YouTube 和第三方博客上都有很好的文檔和學(xué)習(xí)資源。對(duì)于以前有使用 Redux、MobX、Recoil 等 Flux 架構(gòu)庫經(jīng)驗(yàn)的開發(fā)人員來說，他們的學(xué)習(xí)曲線更容易。

這兩個(gè)庫的文檔都很棒，并且以對(duì)經(jīng)驗(yàn)豐富的開發(fā)人員和新開發(fā)人員都友好的方式編寫。

Pinia和Vuex都非常快，在某些情況下，使用Pinia的web應(yīng)用程序會(huì)比使用Vuex更快。這種性能的提升可以歸因于Pinia的極輕的重量，Pinia體積約1KB。

盡管Pinia是在Vue devtools的支持下建立的，但由于Vue devtools沒有暴露出必要的API，所以一些功能如時(shí)間旅行和編輯仍然不被支持。當(dāng)開發(fā)速度和調(diào)試對(duì)你的項(xiàng)目來說更重要時(shí)，這是值得注意的。

Pinia 將這些與 Vuex 3 和 4 進(jìn)行了比較：

這些是Pinia在其狀態(tài)管理庫和Vuex之間的比較中提出的額外見解：

將 Pinia 2（目前處于 alpha 階段）與 Vuex 進(jìn)行比較，我們可以推斷出 Pinia 領(lǐng)先于 Vuex 4。

Vue.js核心團(tuán)隊(duì)為Vuex 5制定了一個(gè)開放的RFC，類似于Pinia使用的RFC。目前，Vuex通過RFC來盡可能多地收集社區(qū)的反饋。希望Vuex 5的穩(wěn)定版本能夠超越Pinea 2。

據(jù)同時(shí)也是 Vue.js 核心團(tuán)隊(duì)成員并積極參與 Vuex 設(shè)計(jì)的 Pinia 的創(chuàng)建者（Eduardo San Martin Morote）所說，Pania 和 Vuex 的相似之處多于不同之處：

盡管 Pinia 足以取代 Vuex，但取代 Vuex 并不是它的目標(biāo)，因此 Vuex 仍然是 Vue.js 應(yīng)用程序的推薦狀態(tài)管理庫。

根據(jù)我的個(gè)人經(jīng)驗(yàn)，由于Pinea是輕量級(jí)的，體積很小，它適合于中小型應(yīng)用。它也適用于低復(fù)雜度的Vue.js項(xiàng)目，因?yàn)橐恍┱{(diào)試功能，如時(shí)間旅行和編輯仍然不被支持。

將 Vuex 用于中小型 Vue.js 項(xiàng)目是過度的，因?yàn)樗亓考?jí)的，對(duì)性能降低有很大影響。因此，Vuex 適用于大規(guī)模、高復(fù)雜度的 Vue.js 項(xiàng)目。

批處理是 React將多個(gè)狀態(tài)更新分組到單個(gè)重新渲染中以獲得更好的性能。

例如，如果你在同一個(gè)點(diǎn)擊事件中有兩個(gè)狀態(tài)更新，React 總是將它們分批處理到一個(gè)重新渲染中。如果你運(yùn)行下面的代碼，你會(huì)看到每次點(diǎn)擊時(shí)，React 只執(zhí)行一次渲染，盡管你設(shè)置了兩次狀態(tài)：

這對(duì)性能非常有用，因?yàn)樗苊饬瞬槐匾闹匦落秩?。它還可以防止你的組件呈現(xiàn)僅更新一個(gè)狀態(tài)變量的“半完成”狀態(tài)，這可能會(huì)導(dǎo)致錯(cuò)誤。

這可能會(huì)讓你想起餐廳服務(wù)員在你選擇第一道菜時(shí)不會(huì)跑到廚房，而是等你完成訂單。

然而，React 的批量更新時(shí)間并不一致。例如，如果你需要獲取數(shù)據(jù)，然后更新handleClick上面的狀態(tài)，那么 React不會(huì)批量更新，而是執(zhí)行兩次獨(dú)立的更新。

這是因?yàn)?React 過去只在瀏覽器事件（如點(diǎn)擊）期間批量更新，但這里我們?cè)谑录呀?jīng)被處理（在 fetch 回調(diào)中）之后更新狀態(tài)：

在 React 18 之前，我們只在 React 事件處理程序期間批量更新。默認(rèn)情況下，React 中不會(huì)對(duì) promise、setTimeout、本機(jī)事件處理程序或任何其他事件中的更新進(jìn)行批處理。

從 React 18 開始createRoot，所有更新都將自動(dòng)批處理，無論它們來自何處。

這意味著超時(shí)、承諾、本機(jī)事件處理程序或任何其他事件內(nèi)的更新將以與 React 事件內(nèi)的更新相同的方式進(jìn)行批處理。

我們希望這會(huì)導(dǎo)致更少的渲染工作，從而在你的應(yīng)用程序中獲得更好的性能：

注意：作為采用 React 18 的一部分，預(yù)計(jì)你將升級(jí)到createRoot。舊行為的render存在只是為了更容易地對(duì)兩個(gè)版本進(jìn)行生產(chǎn)實(shí)驗(yàn)。

無論更新發(fā)生在何處，React 都會(huì)自動(dòng)批量更新，因此：

行為與此相同：

通常，批處理是安全的，但某些代碼可能依賴于在狀態(tài)更改后立即從 DOM 中讀取某些內(nèi)容。對(duì)于這些用例，你可以使用ReactDOM.flushSync()選擇退出批處理：

2、Suspense 的 SSR 支持

這基本上是服務(wù)器端渲染 (SSR) 邏輯的擴(kuò)展。在典型的 React SSR 應(yīng)用程序中，會(huì)發(fā)生以下步驟：

典型 SSR 應(yīng)用程序的問題在于，在下一步可以開始之前，必須立即完成整個(gè)應(yīng)用程序的每個(gè)步驟。這會(huì)使您的應(yīng)用程序在初始加載時(shí)變慢且無響應(yīng)。

React 18 正試圖解決這個(gè)問題。 組件已經(jīng)以這樣的方式進(jìn)行了革命性的改變，它將應(yīng)用程序分解為更小的獨(dú)立單元，這些單元經(jīng)過提到的每個(gè)步驟。這樣一旦用戶看到內(nèi)容，它就會(huì)變成互動(dòng)的。

我們將狀態(tài)更新分為兩類：

單擊、懸停、滾動(dòng)或打字等緊急更新需要立即響應(yīng)以匹配我們對(duì)物理對(duì)象行為方式的直覺。否則他們會(huì)覺得“錯(cuò)了”。

然而，轉(zhuǎn)換是不同的，因?yàn)橛脩舨幌Ｍ谄聊簧峡吹矫總€(gè)中間值。

例如，當(dāng)您在下拉列表中選擇過濾器時(shí)，您希望過濾器按鈕本身在您單擊時(shí)立即響應(yīng)。但是，實(shí)際結(jié)果可能會(huì)單獨(dú)轉(zhuǎn)換。

一個(gè)小的延遲是難以察覺的，而且通常是預(yù)料之中的。如果在結(jié)果渲染完成之前再次更改過濾器，您只關(guān)心看到最新的結(jié)果。

在典型的 React 應(yīng)用程序中，大多數(shù)更新在概念上都是過渡更新。但出于向后兼容性的原因，過渡是可選的。

默認(rèn)情況下，React 18 仍然將更新處理為緊急更新，您可以通過將更新包裝到startTransition.

構(gòu)建流暢且響應(yīng)迅速的應(yīng)用程序并不總是那么容易。有時(shí)，諸如單擊按鈕或輸入輸入之類的小動(dòng)作可能會(huì)導(dǎo)致屏幕上發(fā)生很多事情。這可能會(huì)導(dǎo)致頁面在所有工作完成時(shí)凍結(jié)或掛起。

例如，考慮在過濾數(shù)據(jù)列表的輸入字段中鍵入。您需要將字段的值存儲(chǔ)在 state 中，以便您可以過濾數(shù)據(jù)并控制該輸入字段的值。您的代碼可能如下所示：

在這里，每當(dāng)用戶鍵入一個(gè)字符時(shí)，我們都會(huì)更新輸入值并使用新值來搜索列表并顯示結(jié)果。

對(duì)于大屏幕更新，這可能會(huì)導(dǎo)致頁面在呈現(xiàn)所有內(nèi)容時(shí)出現(xiàn)延遲，從而使打字或其他交互感覺緩慢且無響應(yīng)。

即使列表不是太長，列表項(xiàng)本身也可能很復(fù)雜并且每次擊鍵時(shí)都不同，并且可能沒有明確的方法來優(yōu)化它們的呈現(xiàn)。

從概念上講，問題在于需要進(jìn)行兩種不同的更新。第一個(gè)更新是緊急更新，用于更改輸入字段的值，以及可能會(huì)更改其周圍的一些 UI。

第二個(gè)是顯示搜索結(jié)果的不太緊急的更新。

用戶希望第一次更新是即時(shí)的，因?yàn)檫@些交互的本機(jī)瀏覽器處理速度很快。但是第二次更新可能會(huì)有點(diǎn)延遲。

用戶不希望它立即完成，這很好，因?yàn)榭赡苡泻芏喙ぷ饕?。（?shí)際上，開發(fā)人員經(jīng)常使用去抖動(dòng)等技術(shù)人為地延遲此類更新。）

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

這意味著上面的兩個(gè)狀態(tài)仍然會(huì)同時(shí)呈現(xiàn)，并且仍然會(huì)阻止用戶看到他們交互的反饋，直到一切都呈現(xiàn)出來。我們?nèi)鄙俚氖且环N告訴 React 哪些更新是緊急的，哪些不是的方法。

新startTransitionAPI 通過讓您能夠?qū)⒏聵?biāo)記為“轉(zhuǎn)換”來解決此問題：

包裝在其中的更新startTransition被視為非緊急處理，如果出現(xiàn)更緊急的更新（如點(diǎn)擊或按鍵），則會(huì)中斷。

如果用戶中斷轉(zhuǎn)換（例如，連續(xù)輸入多個(gè)字符），React 將拋出未完成的陳舊渲染工作，僅渲染最新更新。

Transitions 可讓您保持大多數(shù)交互敏捷，即使它們導(dǎo)致顯著的 UI 更改。它們還可以讓您避免浪費(fèi)時(shí)間渲染不再相關(guān)的內(nèi)容。

上述問題的一個(gè)常見解決方案是將第二次更新包裝在 setTimeout 中：

這將延遲第二次更新，直到呈現(xiàn)第一次更新之后。節(jié)流和去抖動(dòng)是這種技術(shù)的常見變體。

一個(gè)重要的區(qū)別是startTransition不安排在以后喜歡的setTimeout是。它立即執(zhí)行。傳遞給的函數(shù)startTransition同步運(yùn)行，但其中的任何更新都標(biāo)記為“轉(zhuǎn)換”。

React 將在稍后處理更新時(shí)使用此信息來決定如何呈現(xiàn)更新。這意味著我們比在超時(shí)中包裝更新更早地開始呈現(xiàn)更新。

在快速設(shè)備上，兩次更新之間的延遲非常小。在較慢的設(shè)備上，延遲會(huì)更大，但 UI 會(huì)保持響應(yīng)。

另一個(gè)重要的區(qū)別是 a 內(nèi)的大屏幕更新setTimeout仍然會(huì)鎖定頁面，只是在超時(shí)之后。

如果用戶在超時(shí)觸發(fā)時(shí)仍在鍵入或與頁面交互，他們?nèi)詫⒈蛔柚古c頁面交互。但是標(biāo)記為 的狀態(tài)更新startTransition是可中斷的，因此它們不會(huì)鎖定頁面。

它們讓瀏覽器在呈現(xiàn)不同組件之間的小間隙中處理事件。

如果用戶輸入發(fā)生變化，React 將不必繼續(xù)渲染用戶不再感興趣的內(nèi)容。

最后，因?yàn)閟etTimeout只是延遲更新，顯示加載指示器需要編寫異步代碼，這通常很脆弱。

通過轉(zhuǎn)換，React 可以為您跟蹤掛起狀態(tài)，根據(jù)轉(zhuǎn)換的當(dāng)前狀態(tài)更新它，并讓您能夠在用戶等待時(shí)顯示加載反饋。

您可以使用startTransition來包裝要移動(dòng)到后臺(tái)的任何更新。通常，這些類型的更新分為兩類：

總結(jié)

React 18 沒有任何重大更改，因此，我們將當(dāng)前的存儲(chǔ)庫升級(jí)到最新版本幾乎不需要更改代碼，但我們可以享受它們很酷的功能。

四、uniappvue3vue2性能

新版 uni-app 框架主要做了三大改進(jìn)：

重寫框架內(nèi)核：基于vue3 + ts重寫內(nèi)置組件和API，實(shí)現(xiàn)更徹底、更高效的tree-shaking；

新增支持 Vite 構(gòu)建工具，在H5平臺(tái)實(shí)現(xiàn)秒開預(yù)覽；

新增支持 Vue3.x，實(shí)現(xiàn)更靈活的開發(fā)方式，及更高的運(yùn)行性能；

基于這三大改進(jìn)，uni-app項(xiàng)目獲得了多快好省四大收益：

更多的語法支持，支持組合式API，業(yè)務(wù)聚焦，開發(fā)效率更高；

更快的編譯速度，H5平臺(tái)十倍加速，小程序、App加速30%以上；

更好的運(yùn)行性能，用戶端響應(yīng)更快，體驗(yàn)更好；

更小的代碼體積，瘦身30%以上，更省體積、更省流量

更多的語法支持

新版uni-app支持Vue 3.x框架，支持組合式API，可實(shí)現(xiàn)更聚焦的業(yè)務(wù)開發(fā)。

Vue 3.x的一些新增特性，uni-app也已經(jīng)完全支持，如：

支持<script setup>

支持<style scoped>、<style module>、State-Driven Dynamic CSS(v-bind)

支持jsx、tsx（h5,app 平臺(tái)支持，小程序不支持）

另外，在小程序平臺(tái)，新版uni-app也擴(kuò)展了更多的語法，如：

更完善的模板語法支持（如 class、style 支持函數(shù)、變量等，不再局限數(shù)組、對(duì)象類型）

更完整的 props 支持（如傳遞函數(shù)）

更完善的 slot 支持（如作用域插槽）

更快的編譯速度

開發(fā)者日常工作中，最無聊的就是等待編譯構(gòu)建。

某乎上還有一個(gè)”程序員在等待編譯的時(shí)候都做什么？“的討論帖，可見編譯時(shí)間對(duì)開發(fā)者而言，是一個(gè)多么尷尬無聊的碎片時(shí)間。

uni-app本次升級(jí)vue3 & Vite后，在編譯時(shí)間上有多少改進(jìn)？帶給開發(fā)者多少福利？我們安排真實(shí)測試，以數(shù)據(jù)說話。

測試環(huán)境說明：

硬件：RedmiBook 14 二代

處理器：Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz

內(nèi)存：16.0 GB

操作系統(tǒng)：Windows 11 專業(yè)版 64 位操作系統(tǒng)

關(guān)于編譯速度，我們做了兩個(gè)維度的對(duì)比：

縱向?qū)Ρ龋禾暨xuni-app常用項(xiàng)目模板，在H5、小程序、App平臺(tái)，分別測試vue 2.6和vue 3.x的編譯時(shí)間

橫向?qū)Ρ龋菏褂脴I(yè)內(nèi)優(yōu)秀的其它跨端框架，創(chuàng)建默認(rèn)項(xiàng)目模板，記錄其編譯時(shí)間，和uni-app的vue 3.x版本進(jìn)行對(duì)比

uni-app 歷史版本縱向?qū)Ρ?/p>

我們選擇uni-app默認(rèn)模板、uni-starter、hello-uniapp三個(gè)項(xiàng)目模板，分別測試vue 2.6和vue 3.x的編譯時(shí)間。

uni-app項(xiàng)目編譯時(shí)間的采集方式：

vue 2.6版本編譯時(shí)間 = webpack 的 stats.endTime - stats.startTime

vue 3.x版本編譯時(shí)間 = 構(gòu)建工具入口處記錄 global.vite_start_time = performance.now()，構(gòu)建工具編譯完成時(shí)：performance.now() - global.vite_start_time

H5平臺(tái)

對(duì)uni-app的三個(gè)項(xiàng)目模板分別運(yùn)行到H5平臺(tái)，進(jìn)行多次編譯測試，并求其均值后，獲得如下數(shù)據(jù)：



由此，我們可以觀察到：

在vue 2.6環(huán)境下，隨著項(xiàng)目復(fù)雜度的提升，H5首頁預(yù)覽所需編譯時(shí)間會(huì)直線增加；這是因?yàn)樵趘ue 2.6版本下，雖然僅預(yù)覽首頁，但依然會(huì)使用 webpack 編譯整個(gè)項(xiàng)目資源；故項(xiàng)目越復(fù)雜，編譯時(shí)間越長；

在vue 3.x環(huán)境下，H5首頁預(yù)覽的編譯時(shí)間跟項(xiàng)目復(fù)雜度也有關(guān)系，但增幅不大；這是因?yàn)樵趘ue 3.x版本下，使用 Vite 進(jìn)行構(gòu)建，預(yù)覽首頁時(shí)僅編譯首頁及首頁所依賴資源，不會(huì)編譯其它頁面資源。

通過圖表對(duì)比，我們可以直觀得出結(jié)論：vue 3.x環(huán)境下的首頁編譯時(shí)間，平均不到vue 2.6環(huán)境下的十分之一。

換言之，vue 3.x版本下的首頁編譯速度，相比vue 2.6版本，有十倍效率提升。

這個(gè)十倍效率提升，主要得益于新版采用Vite作為構(gòu)建工具，由此帶來了兩大好處：

使用原生 ESM 文件，無需打包，實(shí)現(xiàn)極速的服務(wù)啟動(dòng)；

預(yù)覽（運(yùn)行）使用esbuild作為打包工具，相比vue 2.6環(huán)境下的webpack，構(gòu)建速度快 10-100 倍（這不是我們夸大，詳見esbuild）

本著這個(gè)十倍效率提升，小伙伴們還不趕緊上手試試？

小程序平臺(tái)

對(duì)uni-app的三個(gè)模板項(xiàng)目運(yùn)行到小程序平臺(tái)，多次編譯測試，并求其均值后，獲得如下數(shù)據(jù)：



從上圖對(duì)比數(shù)據(jù)來看，我們可以得出結(jié)論：小程序平臺(tái)，vue 3.x版本下的運(yùn)行編譯，相比vue 2.6版本，編譯性能至少提升30%；且項(xiàng)目越復(fù)雜，編譯性能提升越明顯，可以達(dá)到40% ~ 50%。

App平臺(tái)

對(duì)uni-app的三個(gè)項(xiàng)目模板繼續(xù)運(yùn)行到App平臺(tái)，多次編譯測試，并求其均值后，獲得如下數(shù)據(jù)：



從上圖對(duì)比數(shù)據(jù)來看，我們可以得出結(jié)論：App平臺(tái)，vue 3.x版本下的運(yùn)行編譯，相比vue 2.6版本，編譯性能提升將近50%。

雖沒有H5平臺(tái)的十倍效率提升那么刺激，但將近50%的速度提升，經(jīng)常開發(fā)小程序/App的小伙伴，還不心動(dòng)？

業(yè)內(nèi)優(yōu)秀框架橫向?qū)Ρ?/p>

除了采用不同版本的uni-app進(jìn)行縱向?qū)Ρ韧?，我們還使用業(yè)內(nèi)優(yōu)秀的跨端框架Taro，創(chuàng)建空的項(xiàng)目模板，進(jìn)行橫向?qū)Ρ葴y試。

具體測試方案：

安裝Taro的最新cli，本文測試時(shí)使用的版本為"@Tarojs/Taro": "3.3.16"

使用Taro init命令，分別選擇react、vue、vue3框架，創(chuàng)建三個(gè)默認(rèn)項(xiàng)目模板，三個(gè)項(xiàng)目名稱分別為taro3-react、taro3-vue、taro3-vue3，如下圖：



使用npm run dev:h5，運(yùn)行到H5平臺(tái)進(jìn)行預(yù)覽，記錄每次預(yù)覽編譯時(shí)間，重復(fù)執(zhí)行，求其均值

關(guān)于Taro編譯時(shí)間的計(jì)算方案：

開發(fā)一個(gè)Taro擴(kuò)展插件，插件規(guī)范參考Taro官網(wǎng) - 插件功能

在ctx.onBuildStart中記錄開始編譯時(shí)間

在ctx.onBuildFinish中記錄編譯結(jié)束時(shí)間

兩者的時(shí)間差，即為編譯過程消耗時(shí)間

然后使用uni-app的cli命令行，創(chuàng)建基于vue3.x的空項(xiàng)目模板，項(xiàng)目命名為uni-app-vue3。

我們使用各自框架的命令行，將如上創(chuàng)建的5個(gè)項(xiàng)目分別編譯到H5平臺(tái)和小程序平臺(tái)，多次測試，并求其均值。

同框架版本在H5平臺(tái)上的編譯時(shí)間，結(jié)果如下：



從圖中可以看出，uni-app的vue3版本，在H5平臺(tái)上的首頁編譯預(yù)覽性能是遙遙領(lǐng)先的。這個(gè)遙遙有多遠(yuǎn)呢？這么講吧，你都編譯20次了，友商第一次還沒完呢。

繼續(xù)編譯到小程序平臺(tái)，多次測試，求其均值，結(jié)果如下：



從圖中可以看出，uni-app的vue3版本，在小程序平臺(tái)上的編譯性能也是遙遙領(lǐng)先的，這個(gè)遙遙也不近。

更好的運(yùn)行速度

開發(fā)環(huán)節(jié)編譯快了，那面向最終用戶的軟件，運(yùn)行性能怎么樣？

我們進(jìn)入性能測試章節(jié)。

測試方案：

開發(fā)內(nèi)容：開發(fā)一個(gè)仿微博小程序首頁的復(fù)雜長列表，支持下拉刷新、上拉翻頁、點(diǎn)贊。

界面如下：



測試機(jī)型：小米 Mi 10 pro、MIUI 12.5 (21.11.3 開發(fā)版) 、微信版本 8.0.16

準(zhǔn)備工作：每次開始測試前，殺掉各App進(jìn)程、清空內(nèi)存，保證測試機(jī)環(huán)境基本一致；每次從本地讀取靜態(tài)數(shù)據(jù)，屏蔽網(wǎng)絡(luò)差異。

評(píng)測點(diǎn)：長列表中的某個(gè)組件，比如點(diǎn)贊組件，點(diǎn)擊時(shí)是否能及時(shí)的修改未贊和已贊狀態(tài)？

測試計(jì)時(shí)方式：

選中某微博，點(diǎn)擊“點(diǎn)贊”按鈕，實(shí)現(xiàn)點(diǎn)贊狀態(tài)狀態(tài)切換（已贊高亮、未贊灰色），

點(diǎn)贊按鈕 onclick函數(shù)開頭開始計(jì)時(shí)，setData回調(diào)函數(shù)開頭結(jié)束計(jì)時(shí)；

在小米手機(jī)上進(jìn)行多次測試，求其平均值，結(jié)果如下：

記錄條數(shù) 200 400 600 800 1000

vue2 30ms 43ms 56ms 72ms 90ms

vue3 8ms 9ms 9ms 8ms 9ms

從表格中可以看出：

隨著頁面記錄的增加，vue 2.6版本的uni-app項(xiàng)目，點(diǎn)贊組件響應(yīng)時(shí)間快速增加，響應(yīng)越來越慢；

基于vue 3.x的uni-app項(xiàng)目，點(diǎn)贊組件的響應(yīng)時(shí)間跟頁面條數(shù)無關(guān)，一直保持極高的響應(yīng)靈敏度，性能體驗(yàn)遠(yuǎn)高于vue 2.6版本。

從這個(gè)常見的長列表組件響應(yīng)實(shí)驗(yàn)來看，vue 3.x的性能體驗(yàn)要遠(yuǎn)高于vue 2.6版本。

更小的代碼體積

項(xiàng)目發(fā)行后的代碼體積，是一個(gè)很重要的考量指標(biāo)：

H5平臺(tái)：更小的代碼體積，可以幫助開發(fā)者節(jié)省服務(wù)端帶寬及CDN流量，可實(shí)現(xiàn)更快的資源加載及頁面渲染；

小程序平臺(tái)：更小的代碼體積，可加速小程序包的下載（甚至可能免了分包加載的繁瑣），幫助用戶更快進(jìn)入小程序業(yè)務(wù)界面；

App平臺(tái)：更小的代碼體積，可實(shí)現(xiàn)更快的App啟動(dòng)，幫助用戶更快進(jìn)入App首頁

為了測試vue 3.x新版升級(jí)后，代碼體積的變化，我們同樣做了兩個(gè)維度的測試：

縱向?qū)Ρ龋哼x擇uni-app常用項(xiàng)目模板，在H5、小程序、App平臺(tái)，分別測試vue 2.6和vue 3.x的編譯包大小

橫向?qū)Ρ龋菏褂脴I(yè)內(nèi)優(yōu)秀的其它跨端框架，創(chuàng)建默認(rèn)項(xiàng)目模板，記錄其編譯后的包體積大小，和uni-app版本進(jìn)行對(duì)比

Tips：

開發(fā)階段重在編譯速度，對(duì)應(yīng)npm run dev操作

發(fā)行階段重在編譯包大小，對(duì)應(yīng)npm run build操作

uni-app 不同版本縱向?qū)Ρ?/p>

我們復(fù)用之前創(chuàng)建的uni-app默認(rèn)模板、uni-starter、hello-uniapp三個(gè)項(xiàng)目模板，分別測試vue 2.6和vue 3.x的編譯包體積。

uni-app項(xiàng)目編譯包體積的采集方式：編譯到對(duì)應(yīng)平臺(tái)后，記錄編譯后文件夾的大小。

H5平臺(tái)

H5平臺(tái)編譯后代碼體積記錄如下：



從統(tǒng)計(jì)結(jié)果來看，uni-app的vue3.x版本，在H5平臺(tái)上的編譯包體積至少瘦身30%以上。

H5平臺(tái)的瘦身優(yōu)化，主要得益于uni-app框架的底層全面重構(gòu)，實(shí)現(xiàn)了更徹底的搖樹優(yōu)化。

小程序平臺(tái)

小程序平臺(tái)編譯后代碼體積記錄如下：



從統(tǒng)計(jì)結(jié)果來看，uni-app的vue3.x版本，在小程序平臺(tái)上也有大幅瘦身。

以上就是關(guān)于vue畫心電圖相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會(huì)為您講解更多精彩的知識(shí)和內(nèi)容。

推薦閱讀：

前端vue低代碼開發(fā)平臺(tái)（vue 低代碼平臺(tái)）

vue畫心電圖（canvas畫心電圖）

域名證書多少錢一年（域名證書費(fèi)用）

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