Vue3 已經(jīng)發(fā)布一段時間了，這個版本從底層實現(xiàn)到上層 API 設(shè)計都發(fā)生了非常大的變化，但具體改變了些什么呢?一起簡單盤點下：

目前創(chuàng)新互聯(lián)已為上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、網(wǎng)站托管維護(hù)、企業(yè)網(wǎng)站設(shè)計、華池網(wǎng)站維護(hù)等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

一、Composition API

使用傳統(tǒng)的option配置方法寫組件的時候問題，隨著業(yè)務(wù)復(fù)雜度越來越高，代碼量會不斷的加大;由于相關(guān)業(yè)務(wù)的代碼需要遵循option的配置寫到特定的區(qū)域，導(dǎo)致后續(xù)維護(hù)非常的復(fù)雜，同時代碼可復(fù)用性不高，而composition-api就是為了解決這個問題而生。

「1.1 Options API 的問題」

使用傳統(tǒng)OptionsAPI時，新增或者修改一個需求，就需要分別在data，methods，computed里修改 。當(dāng)業(yè)務(wù)邏輯和功能越來越多的時候理解和維護(hù)復(fù)雜組件變得困難。

「1.2 Composition API 的優(yōu)勢」

而Vue3 的組合式 API 將每個功能點抽成一個function使我們可以更加優(yōu)雅的組織我們的代碼。讓相關(guān)功能的代碼更加有序的組織在一起。

「1.3 reactive對比ref」

在 vue2.x 中，數(shù)據(jù)都是定義在data中。但是 Vue3.x 可以使用reactive和ref來進(jìn)行數(shù)據(jù)定義。那么ref和reactive他們有什么區(qū)別呢?

從原理角度對比：

ref用來創(chuàng)建一個包含響應(yīng)式的數(shù)據(jù)的引用對象。

• 接收數(shù)據(jù)可以是：基本數(shù)據(jù)類型、對象類型。
• 基本類型的數(shù)據(jù)：響應(yīng)式依然是靠object.defineProperty()的get與set完成的。
• 對象類型：內(nèi)部求助vue3.0中一個新函數(shù)reactive函數(shù)通過proxy實現(xiàn)。

源碼地址：https://github.com/vuejs/vue-next/blob/master/packages/reactivity/src/ref.ts。

• reactive用來定義：對象和數(shù)組通過使用Proxy來實現(xiàn)響應(yīng)式(數(shù)據(jù)劫持), 并通過Reflect操作源對象內(nèi)部的數(shù)據(jù)。

從使用角度對比：

• ref定義的數(shù)據(jù)：操作數(shù)據(jù)需要.value，讀取數(shù)據(jù)時模板中不需要.value直接使用即可。
• reactive定義的數(shù)據(jù)：操作數(shù)據(jù)與讀取數(shù)據(jù)：均不需要.value。

1.4 新增 watchEffect 函數(shù)

• watch 函數(shù)需要指明監(jiān)視的屬性，并在回調(diào)函數(shù)中執(zhí)行。默認(rèn)情況僅在偵聽的源數(shù)據(jù)變更時才執(zhí)行回調(diào)。也可以加上immediate: true來使其立即生效。
• watchEffect不用指明監(jiān)視哪個屬性，監(jiān)視的回調(diào)中用到哪個屬性，就監(jiān)視哪個屬性。

//watchEffect所指定的回調(diào)中用到的數(shù)據(jù)只要發(fā)生變化，則直接重新執(zhí)行回調(diào)。
watchEffect(()=>{
   const x1 = sum.value
    const x2 = person.age
    console.log('watchEffect執(zhí)行了回調(diào)')
})

二、重寫 VDOM

優(yōu)化前Virtual Dom的diff算法，需要遍歷所有節(jié)點，而且每一個節(jié)點都要比較舊的props和新的props有沒有變化。在Vue3.0中，只有帶PatchFlag的節(jié)點會被真正的追蹤，在后續(xù)更新的過程中，Vue不會追蹤靜態(tài)節(jié)點，只追蹤帶有PatchFlag的節(jié)點來達(dá)到加快渲染的效果。

    vue
    {{msg}}
    {{msg}}

export function render(_ctx，_cache，$props, $setup，$data，$options){
    return (_openBlock(),_createBlock(  span ,null,[
    _createVNode( span ,null, vue ),
    _createVNode( span ,null,_toDisplayString(_ctx.msg), 1 /* TEXT */),
    _createVNode( span ,{
        id: _ctx,hello
        class:  bar 
    },_toDisplayString(_ctx.msg),9 /* TEXT, PROPS */, [ id ])

}

上面的源碼中1 /* TEXT */這個標(biāo)記就是 PatchFlag，Vue只會追蹤第二個和第三個帶有PatchFlag的節(jié)點。

在第三個span標(biāo)簽中PatchFlag變成了 9 /* TEXT, PROPS */, [ id ]，提示我們這個dom元素中不僅有TEXT的變化，PROPS也可能會變化，后邊數(shù)組中的內(nèi)容則是有可能發(fā)生變化的屬性。而靜態(tài)添加的class沒有被標(biāo)記是因為 dom 元素的靜態(tài)屬性在渲染的時候就已經(jīng)創(chuàng)建了，并且是不會變動的。在后面進(jìn)行更新的時候，diff 算法是不會去管它的。

三、響應(yīng)式實現(xiàn)

3.1 Vue2.x 的響應(yīng)式

vue官方文檔：https://cn.vuejs.org/v2/guide/reactivity.html。

實現(xiàn)原理：

• 對象類型：通過Object.defineProperty()對屬性的讀取、修改進(jìn)行攔截(數(shù)據(jù)劫持)。
• 數(shù)組類型：通過重寫更新數(shù)組的一系列方法來實現(xiàn)攔截。(對數(shù)組的變更方法進(jìn)行了包裹)。

Object.defineProperty(data, 'count', {
    get () {}, 
    set () {}
})

存在問題：

• 新增屬性、刪除屬性, 界面不會更新。
• 無法監(jiān)聽數(shù)組下標(biāo)和length長度的變化。
• 不支持 Map、Set、WeakMap 和 WeakSet。

3.2 Vue3.0 的響應(yīng)式

實現(xiàn)原理:

• Proxy：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
• Reflect：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect
• 通過Proxy(代理): 攔截對象中任意屬性的變化——屬性值的讀寫、屬性的添加、屬性的刪除等。
• 通過Reflect(反射): 對源對象的屬性進(jìn)行操作。

MDN文檔中對Proxy與Reflect描述：

new Proxy(data, {
        // 攔截讀取屬性值
    get (target, prop) {
            return Reflect.get(target, prop)
    },
    // 攔截設(shè)置屬性值或添加新屬性
    set (target, prop, value) {
            return Reflect.set(target, prop, value)
    },
    // 攔截刪除屬性
    deleteProperty (target, prop) {
            return Reflect.deleteProperty(target, prop)
    }
})
proxy.name = 'tom' 

四、新的生命周期鉤子

• 去掉了vue2.0中的 beforeCreate 和 created 兩個階段，新增了一個setup。執(zhí)行setup 時，組件實例尚未被創(chuàng)建。
• 每個生命周期函數(shù)必須導(dǎo)入才可以使用，并且所有生命周期函數(shù)需要統(tǒng)一放在 setup 里使用。
• destroyed 銷毀后被重命名為 unmounted卸載后;beforeDestroy 銷毀前生命周期選項被重命名為 beforeUnmount卸載前。

五、新的組件

「5.1 片段(Fragment)」

Vue2: 組件必須有一個根標(biāo)簽。

Vue3: 組件可以沒有根標(biāo)簽, 可以直接寫多個根節(jié)點,內(nèi)部會將多個標(biāo)簽包含在一個Fragment虛擬元素中。

好處: 減少標(biāo)簽層級, 減小內(nèi)存占用，提升了渲染性能。

5.2 TeleportTeleport

就像是一個「任意門」，將包裹組件html結(jié)構(gòu)傳送到任何指定的地方。

例如我們?nèi)粘ｉ_發(fā)中經(jīng)常會使用到彈窗組件，Dialog組件會被渲染到一層層子組件內(nèi)部，處理樣式、定位都變得十分困難。這時我們希望將組件掛載在body上面，來更方便的控制Dialog的樣式。簡單來說,我們既希望繼續(xù)在組件內(nèi)部使用Dialog,又希望渲染的 DOM 結(jié)構(gòu)不嵌套在組件內(nèi)部的 DOM 中。就可以用到, 它可以在「不改變組件內(nèi)部元素父子關(guān)系」的情況下,建立一個傳送門將Dialog渲染的內(nèi)容傳送到body上面。

    

        
彈窗

        關(guān)閉彈窗
    

5.3 Suspense等待

• 異步組件時渲染一些額外內(nèi)容，讓應(yīng)用有更好的用戶體驗。
• 它提供兩個template slot, 剛開始會渲染一個 fallback插槽下的內(nèi)容， 直到到達(dá)某個條件后才會渲染 default 插槽的正式內(nèi)容， 通過使用Suspense組件進(jìn)行展示異步渲染更加簡單。

當(dāng)前題目：[科普文]Vue3到底更新了什么？
鏈接URL：http://uogjgqi.cn/article/cooggpe.html