作者：louiszhai，騰訊 IEG 前端開發(fā)工程師

Vue3 性能提升了 1.3~2 倍，SSR 性能提升了 2~3 倍，升級(jí) Vue3 正是當(dāng)下。

背景

原計(jì)劃 2019 年發(fā)布的 Vue3，又經(jīng)過一年的再次打磨，終于于去年 9 月正式發(fā)布。隨后，不少 UI 組件庫都積極參與適配，去年 12 月，Element-plus（Element-ui 官方升級(jí)版）也發(fā)布了 beta 版。

由于項(xiàng)目中用到了 Element-ui 組件，組件庫未適配的情況下，不敢貿(mào)然升級(jí) Vue3。Element-plus 發(fā)布后，又經(jīng)過 1 個(gè)月的觀察、測(cè)試和調(diào)研，發(fā)現(xiàn) Element-plus 相對(duì)成熟（還有少量 bug，后續(xù)會(huì)講），便開始嘗試升級(jí) Vue3。

如何升級(jí) Vue3

有兩種方案可以快速升級(jí) Vue3：

• 一種是使用微前端輪子，我基于 qiankun2，搭建了 Vue3 項(xiàng)目基座，為了保證平穩(wěn)升級(jí)，子項(xiàng)目繼續(xù)使用 Vue2，然后不斷的把子項(xiàng)目的頁面遷移到基座項(xiàng)目。

• 另一種是，直接升級(jí) Vue3，將項(xiàng)目中的 Vue2 依賴庫升級(jí)到 Vue3 的最新版（當(dāng)前最新版是v3.0.11），并且稍微改造 webpack 編譯腳本，使之適配 Vue3。

之所以會(huì)有方案一，主要還是擔(dān)心 Element-plus 不夠穩(wěn)定，如果有天坑，又無法繞過去，除了向餓了么團(tuán)隊(duì)提交 PR，微前端兜個(gè)底也是不錯(cuò)的應(yīng)急措施。

就這樣微前端方案又運(yùn)行了 1 個(gè)月，部分頁面已完成升級(jí)，運(yùn)行良好，實(shí)踐證明 Element-plus 比想象中穩(wěn)定，這增加了我對(duì)于方案二的信心。考慮到還有少量業(yè)務(wù)復(fù)雜的頁面，在微前端模式下，子項(xiàng)目的各種數(shù)據(jù)多經(jīng)過一層 qiankun 的 proxy 代理，性能有損耗，影響了頁面更新，于是一次性將剩余的頁面全部遷移到 Vue3 項(xiàng)目中。

實(shí)踐證明，除非比較復(fù)雜的項(xiàng)目，或者依賴組件庫沒升級(jí)等原因不適合升級(jí)外，常規(guī)情況下，升級(jí) Vue3 都是一個(gè)不錯(cuò)的選擇。

為什么要升級(jí) Vue3

為什么要升級(jí) Vue3，這是一個(gè)幾乎不需要回答的問題。升級(jí) Vue3 后，代碼結(jié)構(gòu)更加清晰內(nèi)聚，響應(yīng)式數(shù)據(jù)流更加可控，節(jié)省了很多心智成本，從而使得開發(fā)效率大幅提升。Vue3 還帶來了很多新特性，框架層面運(yùn)行性能更高（性能提升了 1.3 至 2 倍，SSR 性能提升了 2 至 3 倍），Composition API 使得代碼拆分，函數(shù)封裝更容易，復(fù)雜項(xiàng)目也隨之更容易管理。

Vue2 中，相關(guān)的邏輯經(jīng)常分散在 option 的 data、watch、computed、created、mounted 等鉤子中，閱讀一段代碼，經(jīng)常需要上下反復(fù)橫跳，帶來了部分閱讀障礙。鉤子又依賴 Vue 實(shí)例，代碼封裝基于天生攜帶鉤子的 Mixin 去做，更加容易和相對(duì)方便。

但正因?yàn)槿绱?#xff0c;Mixin 的鉤子容易不自覺的越界，插手到頁面或組件的內(nèi)部變量和方法管理過程中；甚至，多個(gè)不同的 Mixin，相互之間就很容易沖突，項(xiàng)目開發(fā)者，在引入 Mixin 和避免沖突之間需要保持微妙的平衡，不但增加心智負(fù)擔(dān)，還帶來了副產(chǎn)品：本身撲朔迷離的 this 變得更加不確定。因此，大型項(xiàng)目 Mixin 幾乎都是一種反模式。

現(xiàn)在這些框架問題，都由 Vue3 的 Composition API 解決了。

Vue3 帶來了哪些新特性

我們先看一些立馬能感受到變化的特性。

Proxy 代理

這是一個(gè)一上手 Vue3 就能感知的變化。即使你在 Vue3 中編寫 Vue2 風(fēng)格的基于 option 的代碼，Proxy 也是默默提供著數(shù)據(jù)響應(yīng)式。

const?observe?=?(data)?=>?{Object.keys(data).forEach((key)?=>?{const?initValue?=?data[key];let?value?=?initValue;if?(typeof?initValue?===?'object')?{observe(initValue);return;}Object.defineProperty(data,?key,?{enumerable:?true,configurable:?true,get()?{console.log('visit?key?value?=',?key,?value);return?value;},set(val)?{console.log(`[${key}]changed，old?value=${value},?new?value?=?${val}`);if(value?!==?val)?{value?=?val;}}});}); }; const?data?=?{}; Array.from(new?Array(100),?()?=>?"").forEach((item,?i)?=>?{data[i]?=?{?value:?i?*?2?}; }); console.time(); observe(data); console.timeEnd();?//?default:?0.225ms data.a?=?{?b:?1?}; data.a.b?=?2;

如上所示，Vue2 的數(shù)據(jù)響應(yīng)式是通過 Object.defineProperty 實(shí)現(xiàn)，這是一個(gè)深度遍歷的過程，無論 data 中包含多少層數(shù)據(jù)，都需要全部遍歷一遍。深度遍歷，給對(duì)象的每個(gè)自身屬性添加 defineProperty，需要不小的性能開銷，同時(shí)后面新增到 this 中的屬性不提供響應(yīng)式監(jiān)聽，因此我們需要使用諸如this.$set這種方式去添加新屬性。

Proxy 就沒有這個(gè)問題，如下所示。

const?observe?=?(data)?=>?{return?new?Proxy(data,?{get(target,?key,?receiver)?{console.log('visit',?key);return?Reflect.get(target,?key,?receiver);},set(target,?key,?value,?receiver)?{console.log(`[${key}]changed,?value?=?${value}`);Reflect.set(target,?key,?typeof?value?===?'object'???observe(value)?:?value,?receiver);}}); }; let?data?=?{}; Array.from(new?Array(100),?()?=>?"").forEach((item,?i)?=>?{data[i]?=?{?value:?i?*?2?}; }); console.time(); const?proxy?=?observe(data); console.timeEnd();?//?default:?0.041ms proxy.a?=?{?b:?1?};?//?[a]changed,?value?=?[object?Object] proxy.a.b?=?2;?//?visit?a?\n?[b]changed,?value?=?2

Proxy 不但使得 data 獲得了新屬性的響應(yīng)性，整個(gè)響應(yīng)式處理過程的效率還提升了數(shù)倍，由此帶來了 Vue3 的大部分性能提升。

Composition API

為了保持對(duì) Vue2 的向下兼容，Vue3 中仍然支持純 Option 配置的書寫方式，這為升級(jí)提供了便利，平移 Vue2 的代碼，只需少量改動(dòng)，便可正常運(yùn)行。

同時(shí)考慮到上手難度，Vue3 的頂層代碼風(fēng)格與 Vue2 保持一致，依然是 export 一個(gè)對(duì)象，對(duì)象包含了一系列的配置，其中便有 setup 入口函數(shù)。我們先來看一段代碼，然后逐個(gè)解讀。

import?{?defineComponent,?ref,?reactive,?toRefs,?watch,?watchEffect,?computed,?onMounted?}?from?"vue"; export?default?defineComponent({setup(props,?context)?{const?selectRef?=?ref(null)?//?作為下拉框的ref引用const?state?=?reactive({?//?響應(yīng)式數(shù)據(jù)，類似于Vue2的thisnum:?0,});const?{?init?}?=?toRefs(props);watch(()?=>?state.num,?(newVal,?oldVal)?=>?{console.log(newVal,?oldVal);});watchEffect(()?=>?{console.log(state.num);});const?num2?=?computed(()?=>?state.num?+?1);onMounted(()?=>?{state.loaded?=?true;});return?{?selectRef,?state,?num2,?init,?context?};} });

setup 作為入口函數(shù)，包含兩個(gè)參數(shù)，分別是響應(yīng)式的 props 外部參數(shù)，以及 context 對(duì)象，context 包含 attrs、emit、expose、props、slots 五個(gè)參數(shù)，如下所示：

在 Vue3 的設(shè)計(jì)里，setup，以及從 vue 對(duì)象中解構(gòu)出來的各種生命周期函數(shù)，執(zhí)行優(yōu)先級(jí)高于 Vue2 中的各種生命周期鉤子，因此

beforeCreate()?{console.log('beforeCreate'); }, created()?{console.log('create'); }, setup()?{console.log('setup'); },

這段代碼的輸出依次是 setup、beforeCreate、created。

ref、reactive

setup 中，第一句const selectRef = ref(null);，這里定義的是一個(gè)響應(yīng)式的數(shù)據(jù)，可傳遞給 template 或 render，用于下拉框組件或下拉框 dom 綁定引用。為什么使用 ref，不使用 reactive 呢？ref 和 reactive 都可以給數(shù)據(jù)添加響應(yīng)性，ref 一般用于給 js 基本數(shù)據(jù)類型添加響應(yīng)性（當(dāng)然也支持非基本類型的 object），reactive 只能用于代理非基本數(shù)據(jù)類型。null 是基本數(shù)據(jù)類型，只能使用 ref，那既然如此，為什么不在所有情況都使用 ref 呢？我們來看一段代碼：

const?num?=?ref(0); num.value?=?1; const?obj?=?{?a:?1?}; const?refObj?=?ref(obj); const?reactiveObj?=?reactive(obj); refObj.value.a?=?2; reactiveObj.a?=?3; console.log(num,?refObj,?reactiveObj);

我們注意到，使用 ref api 時(shí)，數(shù)據(jù)變成了對(duì)象，值就是 value 屬性的值，如果數(shù)據(jù)本身就是對(duì)象，依然會(huì)多一層 value 結(jié)構(gòu)，而 reactive 沒有這些副作用。同時(shí)，還有一個(gè)有意思的現(xiàn)象是，所有的源數(shù)據(jù)，都需要經(jīng)過響應(yīng)式 api 包裹，然后才能使用，這跟前面提到的 Proxy 原理有關(guān)，Proxy 代理數(shù)據(jù)時(shí)，需要基于返回的代理進(jìn)行數(shù)據(jù)更新。

toRefs

除了 ref、reactive 外，還有一個(gè)常用的響應(yīng)式 api——toRefs。為什么需要它，這是因?yàn)轫憫?yīng)式對(duì)象，經(jīng)過解構(gòu)出來的屬性不再具有響應(yīng)性，toRefs 就是為了快速獲得響應(yīng)性的屬性，因此這段代碼const { init } = toRefs(props);，就是為了獲得響應(yīng)式屬性 init，想要保留 props 參數(shù)的響應(yīng)性，建議這么做。

watch、watchEffect

const?num?=?ref(0); const?state?=?reactive({num:?0, }); const?obj?=?{?num:?0?}; watch(num,?(newVal,?oldVal)?=>?{console.log("num",?newVal,?oldVal); }); watch(()?=>?state.num,?(newVal,?oldVal)?=>?{console.log("num",?newVal,?oldVal); }); watch(()?=>?obj.num,?()?=>?{console.log("這里不會(huì)執(zhí)行"); }); num++; state.num++; obj.num++;

如上，watch api，它需要接受一個(gè)具有返回值的 getter 函數(shù)或者 ref（如() => state.num，ref）。

如果需要監(jiān)聽多個(gè)值，如下所示：

const?num1?=?ref(0); const?num2?=?ref(0); watch([num1,?num2],?([newNum1,?newNum2],?[prevNum1,?prevNum2])?=>?{console.log([newNum1,?newNum2],?[prevNum1,?prevNum2]); }); num1.value?=?1;?//?[1,?0],?[0,?0] num2.value?=?2;?//?[1,?2],?[1,?0]

可見多個(gè)數(shù)據(jù)的每次更新都會(huì)觸發(fā) watch。想要監(jiān)聽一個(gè)嵌套的對(duì)象，跟 Vue2 一樣，依舊需要使用 deep 選項(xiàng)，如下所示：

const?state?=?reactive({attr:?{id:?1,}, }); watch(()?=>?state,?(currState,?prevState)?=>?{console.log(currState.attr.id,?prevState.attr.id,?currState?===?prevState,?currState?===?state);?//?2,?2,?true,?true },?{?deep:?true?}); watch(()?=>?state.attr.id,?(currId,?prevId)?=>?{console.log(currId,?prevId);?//?2,?1 }); state.attr.id?=?2;

看到差別了嗎？監(jiān)聽響應(yīng)式對(duì)象時(shí)，返回的是對(duì)象的引用，因此 currState，prevState 指向是同一個(gè)最新的 state，如果需要獲取變化前的值，建議返回監(jiān)聽的屬性，如watch(() => state.attr.id)，剛好 state.attr.id 是一個(gè)基本類型的值，那么 deep 也不需要。

watchEffect 是 Vue3 新增的 api，watchEffect 會(huì)自動(dòng)運(yùn)行一次，用于自動(dòng)收集依賴，但不支持獲取變化前的值，除此之外，與 watch 用法一致。那么 watchEffect 適用什么場(chǎng)景呢？這也是我剛上手 Vue3 的困惑之一。我們來看一段代碼：

const?rights?=?{admin:?["read",?"write"],user:?["read"], }; const?state?=?reactive({rights:?"", }) const?userInfo?=?reactive({?role:?"user"?}); userInfo.name?=?"Tom"; userInfo.role?=?"admin"; watch(()?=>?userInfo.role,?(newVal,?oldVal)?=>?{state.rights?=?rights[newVal]; }); watchEffect(()?=>?{state.rights?=?rights[userInfo.role]; });

以上代碼中，watch 中的邏輯只能在 userInfo 變化后執(zhí)行，因此 state.rights 不會(huì)提供初始值，相反，watchEffect 中 state.rights 由于自動(dòng)依賴收集，獲得了一次賦值的機(jī)會(huì)。

這樣做的好處是什么呢？在實(shí)際項(xiàng)目中，userInfo.role 可能是一個(gè)全局 store 中的數(shù)據(jù)，用戶登錄進(jìn)來后，就會(huì)通過接口獲取初始值，我們并不能確認(rèn)，用戶進(jìn)到其中一個(gè)頁面時(shí)，userInfo.role 的值是否已經(jīng)被接口更新，且 userInfo 變化前的值我們也不關(guān)心，watchEffect 就非常適合這種場(chǎng)景，它會(huì)自動(dòng)進(jìn)行一次初始化，并且在變化后，及時(shí)更新值。

watch 和 watchEffect 的監(jiān)聽會(huì)在組件銷毀時(shí)自動(dòng)取消，除此之外，可以通過它們返回的函數(shù)手動(dòng)取消監(jiān)聽，如下所示：

const?stopWatch?=?watch(selectRef,?(newVal,?oldVal){}); const?stopWatchEffect?=?watchEffect(selectRef,?(newVal,?oldVal){}); setTimeout(stopWatch,?1000); setTimeout(stopWatchEffect,?1000);

watchEffect 更多的用法，請(qǐng)參考官方文檔。

computed

computed 的使用如下：

const?num?=?ref(1); const?num2?=?computed(()?=>?num?*?2); num2.value++;?//?error

num2 是一個(gè)不可變的 ref 對(duì)象，不能直接對(duì)它的 value 屬性賦值。

computed 還可以接收一個(gè)帶有 get 和 set 函數(shù)的對(duì)象，來創(chuàng)建一個(gè)可讀寫的 ref 對(duì)象，如下所示：

const?num3?=?computed({get:?()?=>?num.value?*?2,set:?(val)?=>?{num.value?=?val;}, }); num3.value?=?100; console.log(num.value,?num3.value);?//?100?200

自定義 Hooks

Vue3 的 Composition 之所以這樣實(shí)現(xiàn)，主要原因就是為了便于代碼拆分，降低耦合，我們不妨來實(shí)現(xiàn)一個(gè)自定義的 hooks。

//?page.vue import?useCount?from?"./useCount"; export?default?{setup()?{const?{?num,?double,?plus?}?=?useCount(1);return?{?num,?double,?plus?};}, }; //?useCount.js import?{?ref,?computed?}?from?"vue"; export?default?(value)?=>?{const?num?=?ref(value);const?double?=?computed(()?=>?num.value?*?2);const?plus?=?(val)?=>?num.value?+?val;return?{?num,?double,?plus?}; };

useCount.js 就是一個(gè)自定義的 hooks，得益于 Vue3 的全局 API，我們可以輕松做到代碼拆分。Vue3 的 setup 聚合了所有的邏輯，容易產(chǎn)生面條代碼，合理使用自定義 hooks，可以有效的減少面條代碼，提升代碼可維護(hù)性。并且 Vue3 的 hooks 比 react 更加簡(jiǎn)單高效，不會(huì)多次執(zhí)行，不受調(diào)用順序影響，不存在閉包陷阱等等，幾乎可以沒有任何心智負(fù)擔(dān)的使用。

新的生命周期鉤子

看到這里，相信你對(duì) Vue3 的生命周期已經(jīng)有一些了解了，我們不妨來做個(gè)梳理。

Vue3 幾乎內(nèi)置了所有的 Vue2 生命周期鉤子，也就是說，剛開始升級(jí)項(xiàng)目至 Vue3 時(shí)，可以直接使用 Vue2 的鉤子，方便平滑升級(jí)，如上圖左下角所示，有兩個(gè)鉤子發(fā)生了替換，beforeDestory 被替換成了 beforeUnmount，destoryed 被替換成了 unmounted。完整的鉤子對(duì)比如下：

除了 setup 外，Vue3 的其他生命周期鉤子都添加了 on 前綴，更加規(guī)范統(tǒng)一。新的鉤子需要在 setup 中使用，如下所示：

import?{?onMounted?}?from?"vue"; export?default?{setup()?{onMounted(()?=>?{console.log("onMounted");});}, };

Tree-Shaking

Vue3 一共開放了 113 個(gè) API，我們可以通過如下方式引用：

import?{?ref,?reactive,?h,?onMounted?}?from?"vue";

通過 ES6 modules 的引入方式，能夠被 AST 靜態(tài)語法分析感知，從而可以只提取用到的代碼片段，最終達(dá)到 Tree-Shaking 的效果，這樣就使得 Vue3 最終打包出來的包更小，加載更快。據(jù)尤大去年 4 月在 B 站的直播：基本的 hello world 項(xiàng)目大小為 13.5kb，Composition API 僅有 11.75kb，包含所有的運(yùn)行態(tài)僅 22.5kb。

Fragment

Vue3 中，Fragment 的引入，解決了組件需要被一個(gè)唯一根節(jié)點(diǎn)包裹的難題，帶來的是 dom 層級(jí)的減少，以及渲染性能的提升，某些時(shí)候，如下所示：

<!--?child.vue?--> <template><td>{{?title?}}</td><td>{{?subtitle?}}</td><!--?Vue2中template出現(xiàn)了多個(gè)根節(jié)點(diǎn)，無法編譯通過?--> </template> <!--?parent.vue?--> <template><table><tr><child?/></tr></table> </template>

在 Vue2 中，這意味著我們沒辦法在 child.vue 的 template 中加入多個(gè) td 節(jié)點(diǎn)，多個(gè) td 可以被 tr 包裹，如果 child.vue 根節(jié)點(diǎn)替換為 tr，那么就會(huì)跟 parent.vue 的 tr 沖突。

同樣的代碼，在 Vue3 中就能正確編譯通過，這是因?yàn)?Vue3 中，組件的 template 被一層不可見的 Fragment 包裹，組件天生支持多個(gè)根節(jié)點(diǎn)的布局。

Teleport

Teleport 是 Vue3 新增的組件，即傳送門，Teleport 能夠在不改變組件內(nèi)部元素父子關(guān)系的情況下，將子元素”傳送“到其他節(jié)點(diǎn)下加載，如下所示：

<template><div?class="container"?style="width:?100px;?height:?100px;?overflow:?hidden"><div?class="dialog"?style="width:?500px;?height:?400px;">...</div></div> </template>

dialog 直接掛載在 container 下，超出部分將不可見。加一層 Teleport，我們可以輕松將 dialog 展示出來。

<template><div?class="container"?style="width:?100px;?height:?100px;?overflow:?hidden"><teleport?to="body"><div?class="dialog"?style="width:?500px;?height:?400px;">...</div></teleport></div> </template>

dialog 依然處于 container 內(nèi)部，僅僅只是被掛載到 body 上，邏輯關(guān)系不變，展示也不會(huì)遮擋。

Suspense

Vue2 中，我們經(jīng)常寫這樣的 loading 效果，如下所示：

<template><div?class="container"><div?v-if="init"><list?/></div><div?v-else>loading~~</div></div> </template>

Vue3 中，我們可以通過 Suspense 的兩個(gè)插槽實(shí)現(xiàn)以上功能，如下所示：

<template><div class="container"><Suspense><template #default><list /></template><template #fallback>loading~</template></Suspense></div> </template> <script>import { defineAsyncComponent } "vue";export default {components: {list: defineAsyncComponent(() => import("@/components/list.vue")),},}; </script>

Vue3 知識(shí)圖譜

Vue3 還包括了一些其他常用更新，限于篇幅，這里先列出來，下篇再講。

實(shí)際上，Vue3 帶來的更新，遠(yuǎn)不止這些，為此我梳理了一個(gè) Vue3 的知識(shí)圖譜，盡可能囊括一些本文未提到的特性。

如上圖，Vue 不但重寫了 diff 算法，還在編譯階段做了很多優(yōu)化，編譯時(shí)優(yōu)化可以通過這個(gè)網(wǎng)站看出來：https://vue-next-template-explorer.netlify.app/。

Vue3 的開放生態(tài)

根據(jù) Monterail 2 月份發(fā)布的第三版 Vue 生態(tài)報(bào)告，Vue 的流行度逐年上升，很多非 web 的可視化領(lǐng)域也可以基于 Vue 開發(fā)，特別是 Vue3 的渲染 API 的開放，使得基于 Vue 構(gòu)建 Canvas、WebGL、小程序等應(yīng)用更加方便，如下圖所示，60 行代碼實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 Canvas 柱狀圖：

import?{?createRenderer,?h?}?from?"vue"; const?renderer?=?createRenderer({createElement:?(tag)?=>?({?tag?}),patchProp:?(el,?key,?prev,?next)?=>?{?el[key]?=?next;?},insert:?(child,?parent)?=>?{?parent.nodeType?===?1?&&?draw(child)?}, }); let?canvas let?ctx; const?draw?=?(el,?noClear)?=>?{if?(!noClear)?{ctx.clearRect(0,?0,?canvas.width,?canvas.height);}//?柱狀圖繪制邏輯if?(el.tag?==?'chart')?{const?{?data?}?=?el;const?barWidth?=?canvas.width?/?10;const?gap?=?20;const?paddingLeft?=?(data.length?*?barWidth?+?(data.length?-?1)?*?gap)?/?2;const?paddingBottom?=?10;//?x軸//?柱狀圖data.forEach(({?title,?count,?color?},?index)?=>?{const?x?=?paddingLeft?+?index?*?(barWidth?+?gap);const?y?=?canvas.height?-?paddingBottom?-?count;ctx.fillStyle?=?color;ctx.fillRect(x,?y,?barWidth,?count);});}//?遞歸繪制?節(jié)點(diǎn)el.childs?&&?el.childs.forEach(child?=>?draw(child,?true)); }; const?createCanvasApp?=?(App)?=>?{const?app?=?renderer.createApp(App);const?{?mount?}?=?app;app.config.isCustomElement?=?(tag)?=>?tag?===?'chart';app.mount?=?(selector)?=>?{canvas?=?document.createElement('canvas');ctx?=?canvas.getContext('2d');document.querySelector(selector).appendChild(canvas);mount(canvas);};return?app; }; createCanvasApp({setup()?{const?data?=?[{?title:?'數(shù)據(jù)A',?count:?200,?color:?'brown'?},{?title:?'數(shù)據(jù)B',?count:?300,?color:?'skyblue'?},{?title:?'數(shù)據(jù)C',?count:?50,?color:?'gold'?},];return?()?=>?h("chart",?{?data?});}, }).mount('#app');

運(yùn)行結(jié)果如下圖所示：

Vue3 相關(guān)資料

• Vue3 官方網(wǎng)站

• Vite 官方網(wǎng)站

• Vue.js 2021 最新報(bào)告

• Vue Template Explorer

• 第四屆 Vue Conf(預(yù)計(jì) 2021.5.22)

• ThisDot 線上分享會(huì) PPT(2020.4.16)

• Vue Function-based API RFC(2020.1.22)

• State of Vue(2019.6.8)

• Vue3 最新進(jìn)展(2018.11.24)

• 現(xiàn)狀與展望(2017.5.20)

視頻號(hào)最新視頻

5月28-29日

QECon全球軟件質(zhì)量&效能大會(huì)

歡迎關(guān)注

總結(jié)

以上是生活随笔為你收集整理的升级 Vue3 大幅提升开发运行效率的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。