本文分享自華為云社區(qū)《【云駐共創(chuàng)】vue3相比 vue2 的十項(xiàng)優(yōu)點(diǎn)》，作者： 海擁 。

Vue3新版本的理念成型于 2018 年末，當(dāng)時(shí)的 Vue 2 已經(jīng)有兩歲半了。比起通用軟件的生命周期來(lái)這好像也沒(méi)那么久，Vue3在2020年正式推出，在源碼和API都有較大變化，性能得到了顯著的提升，比Vue2.x快1.2~2倍。

其中，一些比較重要的優(yōu)點(diǎn)有：

diff算法的優(yōu)化；hoistStatic 靜態(tài)提升；cacheHandlers事件偵聽(tīng)器緩存；ssr渲染；更好的Ts支持；Compostion API: 組合API/注入API；更先進(jìn)的組件；自定義渲染API；按需編譯，體積比vue2.x更小；支持多根節(jié)點(diǎn)組件等。

下面我們就來(lái)具體說(shuō)說(shuō)vue3 的優(yōu)點(diǎn)。

優(yōu)點(diǎn)1：diff算法的優(yōu)化

vue2中的虛擬dom是全量的對(duì)比（每個(gè)節(jié)點(diǎn)不論寫(xiě)死的還是動(dòng)態(tài)的都會(huì)一層一層比較，這就浪費(fèi)了大部分事件在對(duì)比靜態(tài)節(jié)點(diǎn)上）

vue3新增了靜態(tài)標(biāo)記（patchflag）與上次虛擬節(jié)點(diǎn)對(duì)比時(shí)，只對(duì)比帶有patch flag的節(jié)點(diǎn)（動(dòng)態(tài)數(shù)據(jù)所在的節(jié)點(diǎn)）；可通過(guò)flag信息得知當(dāng)前節(jié)點(diǎn)要對(duì)比的具體內(nèi)容。

例如：下面的模板包含一個(gè)div，div內(nèi)包含三個(gè)段落，其中前兩個(gè)段落是靜態(tài)固定不變的，而第三個(gè)段落的內(nèi)容綁定的msg屬性，當(dāng)msg改變的時(shí)候，Vue會(huì)生成新的虛擬DOM然后和舊的進(jìn)行對(duì)比。

<div>
 <p>云駐共創(chuàng)</p>
 <p>如何評(píng)價(jià) vue3</p>
 <p>{{msg}}</p>
</div>

當(dāng)視圖更新時(shí)，只對(duì)動(dòng)態(tài)節(jié)點(diǎn)部分進(jìn)行diff運(yùn)算，減少了資源的損耗。Patchflag是個(gè)枚舉，取值為1代表這個(gè)元素的文本是動(dòng)態(tài)綁定的，取值為2代表元素的class是動(dòng)態(tài)綁定的。

優(yōu)點(diǎn)2：hoistStatic 靜態(tài)提升

vue2無(wú)論元素是否參與更新，每次都會(huì)重新創(chuàng)建然后再渲染。vue3對(duì)于不參與更新的元素，會(huì)做靜態(tài)提升，只會(huì)被創(chuàng)建一次，在渲染時(shí)直接復(fù)用即可。例如：下面我們利用Vue 3 Template Explorer,來(lái)直觀的感受一下：

<div>
    <div>共創(chuàng)1</div>
    <div>共創(chuàng)2</div>
    <div>{{name}}</div>
</div>

靜態(tài)提升之前

export function render(...) {
    return (
        _openBlock(),
        _createBlock('div', null, [
            _createVNode('div', null, '共創(chuàng)1'),
            _createVNode('div', null, '共創(chuàng)2'),
            _createVNode(
                'div',
                null,
                _toDisplayString(_ctx.name),
                1 /* TEXT */
            ),
        ])
    )
}

靜態(tài)提升之后

const _hoisted_1 = /*#__PURE__*/ _createVNode(
    'div',
    null,
    '共創(chuàng)1',
    -1 /* HOISTED */
)
const _hoisted_2 = /*#__PURE__*/ _createVNode(
    'div',
    null,
    '共創(chuàng)2',
    -1 /* HOISTED */
)

export function render(...) {
    return (
        _openBlock(),
        _createBlock('div', null, [
            _hoisted_1,
            _hoisted_2,
            _createVNode(
                'div',
                null,
                _toDisplayString(_ctx.name),
                1 /* TEXT */
            ),
        ])
    )
}

從以上代碼中我們可以看出，_hoisted_1 和_hoisted_2兩個(gè)方法被提升到了渲染函數(shù) render 之外，也就是我們說(shuō)的靜態(tài)提升。通過(guò)靜態(tài)提升可以避免每次渲染的時(shí)候都要重新創(chuàng)建這些對(duì)象，從而大大提高了渲染效率。

優(yōu)點(diǎn)3：cacheHandlers 事件偵聽(tīng)器緩存

vue2.x中，綁定事件每次觸發(fā)都要重新生成全新的function去更新，cacheHandlers 是Vue3中提供的事件緩存對(duì)象，當(dāng) cacheHandlers 開(kāi)啟，會(huì)自動(dòng)生成一個(gè)內(nèi)聯(lián)函數(shù)，同時(shí)生成一個(gè)靜態(tài)節(jié)點(diǎn)。當(dāng)事件再次觸發(fā)時(shí)，只需從緩存中調(diào)用即可，無(wú)需再次更新。

默認(rèn)情況下onClick會(huì)被視為動(dòng)態(tài)綁定，所以每次都會(huì)追蹤它的變化，但是同一個(gè)函數(shù)沒(méi)必要追蹤變化，直接緩存起來(lái)復(fù)用即可。

例如：下面我們同樣是通過(guò)Vue 3 Template Explorer，來(lái)看一下事件監(jiān)聽(tīng)器緩存的作用：

<div>
    <div @click="todo">做點(diǎn)有趣的事</div>
</div>

該段 html 經(jīng)過(guò)編譯后變成我們下面的結(jié)構(gòu)(未開(kāi)啟事件監(jiān)聽(tīng)緩存)：

export function render(...) {
    return (_openBlock(),_createBlock('div', null, [
            _createVNode('div',{ onClick: _ctx.todo}, '做點(diǎn)有趣的事', 8 /* PROPS */,
                ['onClick']),
        ])
    )
}

當(dāng)我們開(kāi)啟事件監(jiān)聽(tīng)器緩存后：

export function render(...) {
    return (_openBlock(),_createBlock('div', null, [
            _createVNode('div',{
                    onClick:    //開(kāi)啟監(jiān)聽(tīng)后
                        _cache[1] || (_cache[1] = (...args) =>_ctx.todo(...args)),
                },'做點(diǎn)有趣的事'),
        ])
    )
}

我們可以對(duì)比開(kāi)啟事件監(jiān)聽(tīng)緩存前后的代碼，轉(zhuǎn)換之后的代碼, 大家可能還看不懂, 但是不要緊，我們只需要觀察有沒(méi)有靜態(tài)標(biāo)記即可，在Vue3的diff算法中, 只有有靜態(tài)標(biāo)記的才會(huì)進(jìn)行比較, 才會(huì)進(jìn)行追蹤。

優(yōu)點(diǎn)4：ssr渲染

Vue2 中也是有 SSR 渲染的，但是 Vue3 中的 SSR 渲染相對(duì)于 Vue2 來(lái)說(shuō)，性能方面也有對(duì)應(yīng)的提升。

當(dāng)存在大量靜態(tài)內(nèi)容時(shí)，這些內(nèi)容會(huì)被當(dāng)作純字符串推進(jìn)一個(gè) buffer 里面，即使存在動(dòng)態(tài)的綁定，會(huì)通過(guò)模版插值潛入進(jìn)去。這樣會(huì)比通過(guò)虛擬 dmo 來(lái)渲染的快上很多。

當(dāng)靜態(tài)內(nèi)容大到一個(gè)量級(jí)的時(shí)候，會(huì)用_createStaticVNode 方法在客戶端去生成一個(gè) static node，這些靜態(tài) node，會(huì)被直接 innerHtml，就不需要再創(chuàng)建對(duì)象，然后根據(jù)對(duì)象渲染。

優(yōu)點(diǎn)5：更好的Ts支持

vue2不適合使用ts，原因在于vue2的Option API風(fēng)格。options是個(gè)簡(jiǎn)單對(duì)象，而ts是一種類型系統(tǒng)、面向?qū)ο蟮恼Z(yǔ)法。兩者有點(diǎn)不匹配。

在vue2結(jié)合ts的具體實(shí)踐中，要用 vue-class-component 強(qiáng)化 vue 組件，讓 Script 支持 TypeScript 裝飾器，用 vue-property-decorator 來(lái)增加更多結(jié)合 Vue 特性的裝飾器，最終搞的ts的組件寫(xiě)法和js的組件寫(xiě)法差別挺大。

在vue3中，量身打造了defineComponent函數(shù)，使組件在ts下，更好的利用參數(shù)類型推斷 。Composition API 代碼風(fēng)格中，比較有代表性的api就是 ref 和 reactive，也很好的支持了類型聲明。

import { defineComponent, ref } from 'vue'
const Component = defineComponent({
    props: {
        success: { type: String },
        student: {
          type: Object as PropType<Student>,
          required: true
       }
    },
    setup() {
      const year = ref(2020)
      const month = ref<string | number>('9')
      month.value = 9 // OK
     const result = year.value.split('') 
 }

優(yōu)點(diǎn)6：Compostion API: 組合API/注入API

傳統(tǒng)的網(wǎng)頁(yè)是html/css/JAVAscript（結(jié)構(gòu)/樣式/邏輯）分離。vue通過(guò)組件化的方式，將聯(lián)系緊密的結(jié)構(gòu)/樣式/邏輯放在一起，有利于代碼的維護(hù)。compostionapi更進(jìn)一步，著力于JS（邏輯）部分，將邏輯相關(guān)的代碼放在一起，這樣更有利于代碼的維護(hù)。

在vue2的組件內(nèi)使用的是Option API風(fēng)格(data/methods/mounted)來(lái)組織的代碼，這樣會(huì)讓邏輯分散，舉個(gè)例子就是我們完成一個(gè)計(jì)數(shù)器功能，要在data里聲明變量，在methods定義響應(yīng)函數(shù)，在mounted里初始化變量，如果在一個(gè)功能比較多、代碼量比較大的組件里，你要維護(hù)這樣一個(gè)功能，就需要在data/methods/mounted反復(fù)的切換到對(duì)應(yīng)位置，然后進(jìn)行代碼的更改。

而在vue3中，使用setup函數(shù)。如下所示跟count相關(guān)的邏輯，都放到counter.js文件里，跟todo相關(guān)的邏輯放到todos.js里。

import useCounter from './counter'
import useTodo from './todos'

setup(){
let { val, todos, addTodo } = useTodo()
let {count,add} = useCounter() 
return {
val, todos, addTodo,
count,add,
}

優(yōu)點(diǎn)7：更先進(jìn)的組件

vue2是不允許這樣寫(xiě)的，組件必須有一個(gè)跟節(jié)點(diǎn)，現(xiàn)在可以這樣寫(xiě)，vue將為我們創(chuàng)建一個(gè)虛擬的Fragment節(jié)點(diǎn)。

<template>
<div>華為云享專家</div>
<div>全棧領(lǐng)域博主</div>
</template>

在Suspended-component完全渲染之前，備用內(nèi)容會(huì)被顯示出來(lái)。如果是異步組件，Suspense可以等待組件被下載，或者在設(shè)置函數(shù)中執(zhí)行一些異步操作。

優(yōu)點(diǎn)8：自定義渲染API

vue2.x項(xiàng)目架構(gòu)對(duì)于weex（移動(dòng)端跨平臺(tái)方案）和myvue（小程序上使用）等渲染到不同平臺(tái)不太友好，vue3.0推出了自定義渲染API解決了該問(wèn)題。下面我們先看vue2和vue3的入口寫(xiě)法有哪些不同。

vue2

import Vue from 'vue'
import App from './App.vue'
new Vue({ => h(App)}).$mount('#app')

vue3

const { createApp } from 'vue'
import App from "./src/App"
createApp(App).mount(('#app')

vue官方實(shí)現(xiàn)的 createApp 會(huì)給我們的 template 映射生成 html 代碼，但是要是你不想渲染生成到 html ，而是要渲染生成到 canvas 之類的不是html的代碼的時(shí)候，那就需要用到 Custom Renderer API 來(lái)定義自己的 render 渲染生成函數(shù)了。

import { createApp } from "./runtime-render";
import App from "./src/App"; // 根組件
createApp(App).mount('#app');

使用自定義渲染API，如weex和myvue這類方案的問(wèn)題就得到了完美解決。只需重寫(xiě)createApp即可。

優(yōu)點(diǎn)9：按需編譯，體積比vue2.x更小

框架的大小也會(huì)影響其性能。這是 Web 應(yīng)用程序的唯一關(guān)注點(diǎn)，因?yàn)樾枰磿r(shí)下載資源，在瀏覽器解析必要的JavaScript 之前該應(yīng)用程序是不可交互的。對(duì)于單頁(yè)應(yīng)用程序尤其如此。盡管 Vue 一直是相對(duì)輕量級(jí)的（Vue 2 的運(yùn)行時(shí)大小壓縮為 23 KB）。

在 Vue 3 中，通過(guò)將大多數(shù)全局 API 和內(nèi)部幫助程序移至 ES 模塊導(dǎo)出來(lái)，實(shí)現(xiàn)了這一目標(biāo)。這使現(xiàn)代的打包工具可以靜態(tài)分析模塊依賴性并刪除未使用的導(dǎo)出相關(guān)的代碼。模板編譯器還會(huì)生成友好的 Tree-shaking 代碼，在模板中實(shí)際使用了該功能時(shí)才導(dǎo)入該功能的幫助程序。

框架的某些部分永遠(yuǎn)不會(huì) Tree-shaking，因?yàn)樗鼈儗?duì)于任何類型的應(yīng)用都是必不可少的。我們將這些必不可少的部分的度量標(biāo)準(zhǔn)稱為基準(zhǔn)尺寸。盡管增加了許多新功能，但 Vue 3 的基準(zhǔn)大小壓縮后約為 10 KB，還不到 Vue 2 的一半。

優(yōu)點(diǎn)10：支持多根節(jié)點(diǎn)組件

Vue3 一個(gè)模板不再限制有多個(gè)根節(jié)點(diǎn)，(多個(gè)根節(jié)點(diǎn)上的 Attribute 繼承) 需要顯式定義 attribute 應(yīng)該分布在哪里。否則控制臺(tái)會(huì)給出警告提示。

在 Vue 3 中，組件現(xiàn)在正式支持多根節(jié)點(diǎn)組件，即片段！

在 2.x 中，不支持多根組件，當(dāng)用戶意外創(chuàng)建多根組件時(shí)會(huì)發(fā)出警告，因此，為了修復(fù)此錯(cuò)誤，許多組件被包裝在一個(gè)中。如下

<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>

在 3.x 中，組件現(xiàn)在可以有多個(gè)根節(jié)點(diǎn)！但是，這確實(shí)要求開(kāi)發(fā)者明確定義屬性應(yīng)該分布在哪里。

<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

結(jié)尾想說(shuō)的

Vue是國(guó)內(nèi)最火的前端框架之一。性能提升，運(yùn)行速度是vue2的1.2-2倍。

• 體積更小，按需編譯體積vue2要更小。
• 類型推斷，更好的支持ts這個(gè)也是趨勢(shì)。
• 高級(jí)給予，暴露了更底層的API和提供更先進(jìn)的內(nèi)置組件。
• 組合API，能夠更好的組織邏輯，封裝邏輯，復(fù)用邏輯

對(duì)未來(lái)的展望

技術(shù)總是越新越好，越來(lái)越多的企業(yè)都升級(jí)了vue3；

大型項(xiàng)目，由于對(duì)TS的友好越來(lái)越多的大型項(xiàng)目可以使用vue3；

作為程序員，我們就應(yīng)該適應(yīng)市場(chǎng)，提高自己的競(jìng)爭(zhēng)力，為加薪提供空間。