基于異步組件Vue3提供組件的解決方案——Vue3

   2023-06-07 網絡整理佚名1910

核心提示：基本用法：直接在一個對象上定義新的屬性或修改現有的屬性，并返回對象。方案：針對常用數組原型方法push、pop、shift、、、sort、進行了hack處理；提供Vue.個參數即字段類型，字段類型情況如下所示。除此之外，發現所有的靜態節點，都保存為一個變量進行靜態提升，可在重新渲染時直接引用，無需重新創建。源碼如下，有運用最長遞增序列的算法思想。API新語法可見官方遷移文檔，參考中有鏈接~

，否則會報錯。

Vue3，我們可以在組件中有多個根節點，這樣我們就可以少寫一層了，！

異步組件

Vue3 提供的組件允許程序在等待異步組件的同時渲染底線內容，例如讓用戶體驗更流暢。 要使用它，請在模板中聲明它并包含兩個命名插槽：和。 確保在異步內容加載完成時顯示默認插槽，并將插槽用作加載狀態。

???
?????#default>
???????
?????
?????#fallback>
???????

?????????Loading...
???????

?????
???

在實際項目中，如果要在setup中調用異步請求，需要在setup前加上async關鍵字。 這時候，你會被警告async setup() is used a .

解決方法：在父頁面外包裹一層組件調用當前組件。

Vue3 提供了組件來將部分 DOM 移動到 Vue 應用程序之外的位置。 比如項目中的常用組件。

"dialogVisible?=?true">點擊
"body">
???"dialog"?v-if="dialogVisible">
???





復合API

Vue2是一個可選的API（API），一個邏輯會分散在文件的不同位置（data、props、watch、 等），導致代碼可讀性差，需要上下跳轉文件位置。 Vue3的組合API（API）很好的解決了這個問題，可以把相同邏輯的內容寫到一起。

除了增強代碼的可讀性和內聚性之外，組合的API還提供了更完善的邏輯復用性解決方案。 例如，以下示例顯示了常用的鼠標坐標。

//?main.vue


cript?setup>
import?{?ref?}?from?'vue'
import?useMousePosition?from?'./useMousePosition'

const?{x,?y}?=?useMousePosition()

}
cript>

//?useMousePosition.js
import?{?ref,?onMounted,?onUnmounted?}?from?'vue'

function?useMousePosition()?{
??let?x?=?ref(0)
??let?y?=?ref(0)
??
??function?update(e)?{
????x.value?=?e.pageX
????y.value?=?e.pageY
??}
??
??onMounted(()?=>?{
????window.addEventListener('mousemove',?update)
??})
??
??onUnmounted(()?=>?{
????window.removeEventListener('mousemove',?update)
??})
??
??return?{
????x,
????y
??}
}
cript>

解決了Vue2 Mixin命名沖突，依賴關系不清晰，不同組件之間配置不夠靈活的隱患。

反應原則

Vue2 響應式原則的基礎是 .; Vue3響應式原理的基礎是Proxy。

.

基本用法：直接在一個對象上定義新的屬性或修改已有的屬性，并返回該對象。

Tips：and值和and不要并存。

let?obj?=?{}
let?name?=?'瑾行'
Object.defineProperty(obj,?'name',?{
??enumerable:?true,?//?可枚舉（是否可通過for...in?或?Object.keys()進行訪問）
??configurable:?true,?//?可配置（是否可使用delete刪除，是否可再次設置屬性）
??//?value:?'',?//?任意類型的值，默認undefined
??//?writable:?true,?//?可重寫
??get:?function()?{
????return?name
??},
??set:?function(value)?{
????name?=?value
??}
})

移植Vue2核心源碼，略有刪減。

function?defineReactive(obj,?key,?val)?{
??//?一?key?一個?dep
??const?dep?=?new?Dep()
??
??//?獲取?key?的屬性描述符，發現它是不可配置對象的話直接?return
??const?property?=?Object.getOwnPropertyDescriptor(obj,?key)
??if?(property?&&?property.configurable?===?false)?{?return?}
??
??//?獲取?getter?和?setter，并獲取?val?值
??const?getter?=?property?&&?property.get
??const?setter?=?property?&&?property.set
??if((!getter?||?setter)?&&?arguments.length?===?2)?{?val?=?obj[key]?}
??
??//?遞歸處理，保證對象中所有?key?被觀察
??let?childOb?=?observe(val)
??
??Object.defineProperty(obj,?key,?{
????enumerable:?true,
????configurable:?true,
????//?get?劫持?obj[key]?的?進行依賴收集
????get:?function?reactiveGetter()?{
??????const?value?=?getter???getter.call(obj)?:?val
??????if(Dep.target)?{
????????//?依賴收集
????????dep.depend()
????????if(childOb)?{
??????????//?針對嵌套對象，依賴收集
??????????childOb.dep.depend()
??????????//?觸發數組響應式
??????????if(Array.isArray(value))?{
????????????dependArray(value)
??????????}
????????}
??????}
????}
????return?value
??})
??//?set?派發更新?obj[key]
??set:?function?reactiveSetter(newVal)?{
????...
????if(setter)?{
??????setter.call(obj,?newVal)
????}?else?{
??????val?=?newVal
????}
????//?新值設置響應式
????childOb?=?observe(val)
????//?依賴通知更新
????dep.notify()
??}
}

那么為什么Vue3放棄了呢？ 那一定有一些缺陷。

主要原因：無法監控對象或數組的新增和刪除元素。

Vue2解決方案：對常見的數組原型方法push、pop、shift、、、sort進行hack處理，提供Vue.set監聽對象/數組新屬性。 響應于添加/刪除對象，也可以創建新對象。 添加合并新屬性和舊對象； 刪除是指將刪除屬性后的對象深拷貝到新的對象中。

Tips：監聽數組中已有的元素是可以的，但是Vue2之所以不提供是因為性能問題。 詳情請參考第二篇~。

代理人

Proxy是ES6的新特性，通過第二個參數攔截目標對象的行為。 相比之下，提供了全方位的語言響應能力，消除了局限性。 但是在兼容性方面放棄了（IE11以下）

局限性

添加和刪??除對象/數組。

監視器。 調整。

支持映射、集合和。

基本用法：為對象創建代理，實現基本操作和自定義操作的攔截。

const?handler?=?{
??get:?function(obj,?prop)?{
????return?prop?in?obj???obj[prop]?:?''
??},
??set:?function()?{},
??...
}

移植Vue3的源碼.ts文件

function?createReactiveObject(target,?isReadOnly,?baseHandlers,?collectionHandlers,?proxyMap)?{
??...
??//?collectionHandlers:?處理Map、Set、WeakMap、WeakSet
??//?baseHandlers:?處理數組、對象
??const?proxy?=?new?Proxy(
????target,
????targetType?===?TargetType.COLLECTION???collectionHandlers?:?baseHandlers
??)
??proxyMap.set(target,?proxy)
??return?proxy
}

以.ts為例，之所以使用.get而不是[key]，是因為參數可以在調用時將this指向對象，而不是構造Proxy時的對象。

//?依賴收集
function?createGetter(isReadonly?=?false,?shallow?=?false)?{
??return?function?get(target:?Target,?key:?string?|?symbol,?receiver:?object)?{
????...
????//?數組類型
????const?targetIsArray?=?isArray(target)
????if?(!isReadonly?&&?targetIsArray?&&?hasOwn(arrayInstrumentations,?key))?{
??????return?Reflect.get(arrayInstrumentations,?key,?receiver)
????}
????//?非數組類型
????const?res?=?Reflect.get(target,?key,?receiver);
????
????//?對象遞歸調用
????if?(isObject(res))?{
??????return?isReadonly???readonly(res)?:?reactive(res)
????}

????return?res
??}
}
//?派發更新
function?createSetter()?{
??return?function?set(target:?Target,?key:?string?|?symbol,?value:?unknown,?receiver:?Object)?{
????value?=?toRaw(value)
????oldValue?=?target[key]
????//?因?ref?數據在?set?value?時就已?trigger?依賴了，所以直接賦值?return?即可
????if?(!isArray(target)?&&?isRef(oldValue)?&&?!isRef(value))?{
??????oldValue.value?=?value
??????return?true
????}

????//?對象是否有?key?有?key?set，無?key?add
????const?hadKey?=?hasOwn(target,?key)
????const?result?=?Reflect.set(target,?key,?value,?receiver)
????
????if?(target?===?toRaw(receiver))?{
??????if?(!hadKey)?{
????????trigger(target,?TriggerOpTypes.ADD,?key,?value)
??????}?else?if?(hasChanged(value,?oldValue))?{
????????trigger(target,?TriggerOpTypes.SET,?key,?value,?oldValue)
??????}
????}
????return?result
??}
}

虛擬DOM

與 Vue2 相比，Vue3 在虛擬 DOM 中增加了字段。 讓我們借助 Vue3 來看一下。

"app">
??
技術摸魚

??
今天天氣真不錯

??
{{name}}




渲染函數如下。

import?{?createElementVNode?as?_createElementVNode,?toDisplayString?as?_toDisplayString,?openBlock?as?_openBlock,?createElementBlock?as?_createElementBlock,?pushScopeId?as?_pushScopeId,?popScopeId?as?_popScopeId?}?from?"vue"

const?_withScopeId?=?n?=>?(_pushScopeId("scope-id"),n=n(),_popScopeId(),n)
const?_hoisted_1?=?{?id:?"app"?}
const?_hoisted_2?=??_withScopeId(()?=>?_createElementVNode("h1",?null,?"技術摸魚",?-1?))
const?_hoisted_3?=??_withScopeId(()?=>?_createElementVNode("p",?null,?"今天天氣真不錯",?-1?))

export?function?render(_ctx,?_cache,?$props,?$setup,?$data,?$options)?{
??return?(_openBlock(),?_createElementBlock("div",?_hoisted_1,?[
????_hoisted_2,
????_hoisted_3,
????_createElementVNode("div",?null,?_toDisplayString(_ctx.name),?1?)
??]))
}

注意第三個的第四個參數是字段類型，字段類型如下。 1表示該節點是一個動態的文本節點，所以在diff過程中，只需要比較文本內容，不需要關注class，style等。另外發現都是靜態的節點保存為靜態提升的變量，重新渲染時可以直接引用，無需重新創建。

export?const?enum?PatchFlags?{?
??TEXT?=?1,?//?動態文本內容
??CLASS?=?1?<??STYLE?=?1?<??PROPS?=?1?<??FULL_PROPS?=?1?<??HYDRATE_EVENTS?=?1?<??STABLE_FRAGMENT?=?1?<??KEYED_FRAGMENT?=?1?<??UNKEYED_FRAGMENT?=?1?<??NEED_PATCH?=?1?<??DYNAMIC_SLOTS?=?1?<??HOISTED?=?-1,??//?靜態節點，diff階段忽略其子節點
??BAIL?=?-2?//?代表?diff?應該結束
}

事件緩存

Vue3 可以在第一次渲染后緩存我們的事件。 與Vue2相比，不需要每次渲染都傳入一個新的函數。 添加點擊事件。

"app">
??
技術摸魚

??
今天天氣真不錯

??
{{name}}

??nCLick="()?=>?{}">

渲染函數如下

import?{?createElementVNode?as?_createElementVNode,?toDisplayString?as?_toDisplayString,?openBlock?as?_openBlock,?createElementBlock?as?_createElementBlock,?pushScopeId?as?_pushScopeId,?popScopeId?as?_popScopeId?}?from?"vue"

const?_withScopeId?=?n?=>?(_pushScopeId("scope-id"),n=n(),_popScopeId(),n)
const?_hoisted_1?=?{?id:?"app"?}
const?_hoisted_2?=??_withScopeId(()?=>?_createElementVNode("h1",?null,?"技術摸魚",?-1?))
const?_hoisted_3?=??_withScopeId(()?=>?_createElementVNode("p",?null,?"今天天氣真不錯",?-1?))
const?_hoisted_4?=??_withScopeId(()?=>?_createElementVNode("span",?{?onCLick:?"()?=>?{}"?},?[
??_createElementVNode("span")
],?-1?))

export?function?render(_ctx,?_cache,?$props,?$setup,?$data,?$options)?{
??return?(_openBlock(),?_createElementBlock("div",?_hoisted_1,?[
????_hoisted_2,
????_hoisted_3,
????_createElementVNode("div",?null,?_toDisplayString(_ctx.name),?1?),
????_hoisted_4
??]))
}

差異優化

移植 Vue3 源代碼。 結合上面和源碼，有助于在時區分靜態節點和不同類型的動態節點。 在一定程度上減少節點本身及其屬性的比較。

function?patchChildren(n1,?n2,?container,?parentAnchor,?parentComponent,?parentSuspense,?isSVG,?optimized)?{
??//?獲取新老孩子節點
??const?c1?=?n1?&&?n1.children
??const?c2?=?n2.children
??const?prevShapeFlag?=?n1???n1.shapeFlag?:?0
??const?{?patchFlag,?shapeFlag?}?=?n2
??
??//?處理?patchFlag?大于?0?
??if(patchFlag?>?0)?{
????if(patchFlag?&&?PatchFlags.KEYED_FRAGMENT)?{
??????//?存在?key
??????patchKeyedChildren()
??????return
????}?els?if(patchFlag?&&?PatchFlags.UNKEYED_FRAGMENT)?{
??????//?不存在?key
??????patchUnkeyedChildren()
??????return
????}
??}
??
??//?匹配是文本節點（靜態）：移除老節點，設置文本節點
??if(shapeFlag?&&?ShapeFlags.TEXT_CHILDREN)?{
????if?(prevShapeFlag?&?ShapeFlags.ARRAY_CHILDREN)?{
??????unmountChildren(c1?as?VNode[],?parentComponent,?parentSuspense)
????}
????if?(c2?!==?c1)?{
??????hostSetElementText(container,?c2?as?string)
????}
??}?else?{
????//?匹配新老 Vnode 是數組，則全量比較；否則移除當前所有的節點
????if?(prevShapeFlag?&?ShapeFlags.ARRAY_CHILDREN)?{
??????if?(shapeFlag?&?ShapeFlags.ARRAY_CHILDREN)?{
????????patchKeyedChildren(c1,?c2,?container,?anchor,?parentComponent,?parentSuspense,...)
??????}?else?{
????????unmountChildren(c1?as?VNode[],?parentComponent,?parentSuspense,?true)
??????}
????}?else?{
??????
??????if(prevShapeFlag?&?ShapeFlags.TEXT_CHILDREN)?{
????????hostSetElementText(container,?'')
??????}?
??????if?(shapeFlag?&?ShapeFlags.ARRAY_CHILDREN)?{
????????mountChildren(c2?as?VNodeArrayChildren,?container,anchor,parentComponent,...)
??????}
????}
??}
}

源代碼如下。

function?patchUnkeyedChildren(c1,?c2,?container,?parentAnchor,?parentComponent,?parentSuspense,?isSVG,?optimized)?{
??c1?=?c1?||?EMPTY_ARR
??c2?=?c2?||?EMPTY_ARR
??const?oldLength?=?c1.length
??const?newLength?=?c2.length
??const?commonLength?=?Math.min(oldLength,?newLength)
??let?i
??for(i?=?0;?i?????//?如果新?Vnode?已經掛載，則直接?clone?一份，否則新建一個節點
????const?nextChild?=?(c2[i]?=?optimized???cloneIfMounted(c2[i]?as?Vnode))?:?normalizeVnode(c2[i])
????patch()
??}
??if(oldLength?>?newLength)?{
????//?移除多余的節點
????unmountedChildren()
??}?else?{
????//?創建新的節點
????mountChildren()
??}
??
}

源碼如下，采用最長遞增序列的算法思想。

function?patchKeyedChildren(c1,?c2,?container,?parentAnchor,?parentComponent,?parentSuspense,?isSVG,?optimized)?{
??let?i?=?0;
??const?e1?=?c1.length?-?1
??const?e2?=?c2.length?-?1
??const?l2?=?c2.length
??
??//?從頭開始遍歷，若新老節點是同一節點，執行 patch 更新差異；否則，跳出循環?
??while(i?<=?e1?&&?i?<=?e2)?{
????const?n1?=?c1[i]
????const?n2?=?c2[i]
????
????if(isSameVnodeType)?{
??????patch(n1,?n2,?container,?parentAnchor,?parentComponent,?parentSuspense,?isSvg,?optimized)
????}?else?{
??????break
????}
????i++
??}
??
??//?從尾開始遍歷，若新老節點是同一節點，執行 patch 更新差異；否則，跳出循環?
??while(i?<=?e1?&&?i?<=?e2)?{
????const?n1?=?c1[e1]
????const?n2?=?c2[e2]
????if(isSameVnodeType)?{
??????patch(n1,?n2,?container,?parentAnchor,?parentComponent,?parentSuspense,?isSvg,?optimized)
????}?else?{
??????break
????}
????e1--
????e2--
??}
??
??//?僅存在需要新增的節點
??if(i?>?e1)?{????
????if(i?<=?e2)?{
??????const?nextPos?=?e2?+?1
??????const?anchor?=?nextPos???????while(i?<=?e2)?{
????????patch(null,?c2[i],?container,?parentAnchor,?parentComponent,?parentSuspense,?isSvg,?optimized)
??????}
????}
??}
??
??//?僅存在需要刪除的節點
??else?if(i?>?e2)?{
????while(i?<=?e1)?{
??????unmount(c1[i],?parentComponent,?parentSuspense,?true)????
????}
??}
??
??//?新舊節點均未遍歷完
??//?[i?...?e1?+?1]:?a?b?[c?d?e]?f?g
??//?[i?...?e2?+?1]:?a?b?[e?d?c?h]?f?g
??//?i?=?2,?e1?=?4,?e2?=?5
??else?{
????const?s1?=?i
????const?s2?=?i
????//?緩存新?Vnode?剩余節點?上例即{e:?2,?d:?3,?c:?4,?h:?5}
????const?keyToNewIndexMap?=?new?Map()
????for?(i?=?s2;?i?<=?e2;?i++)?{
??????const?nextChild?=?(c2[i]?=?optimized
????????????cloneIfMounted(c2[i]?as?VNode)
??????????:?normalizeVNode(c2[i]))
??????
??????if?(nextChild.key?!=?null)?{
????????if?(__DEV__?&&?keyToNewIndexMap.has(nextChild.key))?{
??????????warn(
????????????`Duplicate?keys?found?during?update:`,
?????????????JSON.stringify(nextChild.key),
????????????`Make?sure?keys?are?unique.`
??????????)
????????}
????????keyToNewIndexMap.set(nextChild.key,?i)
??????}
????}
??}
??
??let?j?=?0
??//?記錄即將?patch?的?新?Vnode?數量
??let?patched?=?0
??//?新?Vnode?剩余節點長度
??const?toBePatched?=?e2?-?s2?+?1
??//?是否移動標識
??let?moved?=?false
??let?maxNewindexSoFar?=?0
??
??//?初始化?新老節點的對應關系（用于后續最大遞增序列算法）
??const?newIndexToOldIndexMap?=?new?Array(toBePatched)
??for?(i?=?0;?i???
??//?遍歷老?Vnode?剩余節點
??for?(i?=?s1;?i?<=?e1;?i++)?{
????const?prevChild?=?c1[i]
????
????//?代表當前新?Vnode?都已patch，剩余舊?Vnode?移除即可
????if?(patched?>=?toBePatched)?{
??????unmount(prevChild,?parentComponent,?parentSuspense,?true)
??????continue
????}
????
????let?newIndex
????//?舊?Vnode?存在?key，則從?keyToNewIndexMap?獲取
????if?(prevChild.key?!=?null)?{
??????newIndex?=?keyToNewIndexMap.get(prevChild.key)
????//?舊?Vnode?不存在?key，則遍歷新?Vnode?獲取
????}?else?{
??????for?(j?=?s2;?j?<=?e2;?j++)?{
????????if?(newIndexToOldIndexMap[j?-?s2]?===?0?&&?isSameVNodeType(prevChild,?c2[j]?as?VNode)){
???????????newIndex?=?j
???????????break
????????}
??????}???????????
???}
???
???//?刪除、更新節點
???//?新?Vnode?沒有?當前節點，移除
???if?(newIndex?===?undefined)?{
?????unmount(prevChild,?parentComponent,?parentSuspense,?true)
???}?else?{
?????//?舊?Vnode?的下標位置?+?1，存儲到對應?新?Vnode?的?Map?中
?????//?+?1?處理是為了防止數組首位下標是?0?的情況，因為這里的?0?代表需創建新節點
?????newIndexToOldIndexMap[newIndex?-?s2]?=?i?+?1
?????
?????//?若不是連續遞增，則代表需要移動
?????if?(newIndex?>=?maxNewIndexSoFar)?{
???????maxNewIndexSoFar?=?newIndex
?????}?else?{
???????moved?=?true
?????}
?????
?????patch(prevChild,c2[newIndex],...)
?????patched++
???}
??}
??
??//?遍歷結束，newIndexToOldIndexMap?=?{0:5,?1:4,?2:3,?3:0}
??//?新建、移動節點
??const?increasingNewIndexSequence?=?moved
??//?獲取最長遞增序列
????getSequence(newIndexToOldIndexMap)
??:?EMPTY_ARR
??
??j?=?increasingNewIndexSequence.length?-?1

??for?(i?=?toBePatched?-?1;?i?>=?0;?i--)?{
????const?nextIndex?=?s2?+?i
????const?nextChild?=?c2[nextIndex]?as?VNode
????const?anchor?=?extIndex?+?1?????//?0?新建?Vnode
????if?(newIndexToOldIndexMap[i]?===?0)?{
??????patch(null,nextChild,...)
????}?else?if?(moved)?{
??????//?移動節點
??????if?(j?????????move(nextChild,?container,?anchor,?MoveType.REORDER)
??????}?else?{
????????j--
??????}
????}
??}
}

包裝優化

tree-：模塊打包等概念。去除上下文中沒有引用的代碼。 主要依賴and語句，用于檢測代碼模塊是否被文件導出、導入、使用。

舉個例子，在Vue2中，全局API是暴露在Vue實例上的，即使不用，也無法通過tree-消除。

import?Vue?from?'vue'

Vue.nextTick(()?=>?{
??//?一些和DOM有關的東西
})

在 Vue3 中，重構了全局和內部 API，同時考慮到了對 tree- 的支持。 因此，全局 API 現在只能作為 ES 模塊構建的命名導出來訪問。

import?{?nextTick?}?from?'vue'

nextTick(()?=>?{
??//?一些和DOM有關的東西
})

通過此更改，只要模塊綁定器支持樹，Vue 應用程序中未使用的 API 將從最終包中刪除，從而獲得最佳文件大小。 受此更改影響的全局 API 如下。

內部 API 也有按名稱導出的標簽或指令，例如 、v-model 等。 只有當程序真正被使用時，才會對其進行捆綁和打包。

根據友達直播了解到，現在Vue3將所有的運行函數都打包成一個只有22.5kb的包，比Vue2輕很多。

自定義渲染 API

Vue3默認提供的是映射到html。 但是如果要生成，需要使用api自定義生成函數。

//?自定義runtime-render函數
import?{?createApp?}?from?'./runtime-render'
import?App?from?'./src/App'

createApp(App).mount('#app')

支持

Vue3 由 TS 重寫，比 Vue2 支持更好。

大約

列舉一些Vue3的配套產品。 具體的API新語法可以在官方遷移文檔中找到，參考中有鏈接~。

參考

Vue3.0性能優化改寫虛擬Dom[1]

記一個思想問答題：為什么Vue不能檢測數組變化[2]

Vue3源碼解析系列——響應式原理（下）[3]

Vue源碼解讀（三）——響應式原理[4]

Vue 3 Dom Diff源碼閱讀[5]

Vue 2 遷移[6]

關于這篇文章