2、相同與區別

接下來，咱來會會這個新特性

round 1. $slots & $scopedSlots

$slots 這塊邏輯沒變，還是沿用的以前的代碼

// $slots
const options = vm.$options
const parentVnode = vm.$vnode = options._parentVnode
const renderContext = parentVnode && parentVnode.context
vm.$slots = resolveSlots(options._renderChildren, renderContext)


$scopedSlots 這塊則進行了改造，執行了 normalizeScopedSlots() 並接收其返回值為 $scopedSlots 的值

if (_parentVnode) {
vm.$scopedSlots = normalizeScopedSlots(
_parentVnode.data.scopedSlots,
vm.$slots,
vm.$scopedSlots
)
}


接著，我們來會一會 normalizeScopedSlots ，首先我們先看看它的幾個參數

export function normalizeScopedSlots (
slots: { [key: string]: Function } | void, // 某節點 data 屬性上 scopedSlots
normalSlots: { [key: string]: Array<VNode> }, // 當前節點下的普通插槽
prevSlots?: { [key: string]: Function } | void // 當前節點下的特殊插槽
): any {}


• 首先，如果 slots 參數不存在，則直接返回一個空對象 {}

if (!slots) {
res = {}
}


• 若 prevSlots 存在，且滿足系列條件的情況，則直接返回 prevSlots

const hasNormalSlots = Object.keys(normalSlots).length > 0 // 是否擁有普通插槽
const isStable = slots ? !!slots.$stable : !hasNormalSlots // slots 上的 $stable 值
const key = slots && slots.$key // slots 上的 $key 值
else if (
isStable &&
prevSlots &&
prevSlots !== emptyObject &&
key === prevSlots.$key && // slots $key 值與 prevSlots $key 相等
!hasNormalSlots && // slots 中沒有普通插槽
!prevSlots.$hasNormal // prevSlots 中沒有普通插槽
) {
return prevSlots
}


註：這裡的 $key , $hasNormal , $stable 是直接使用 vue 內部對 Object.defineProperty 封裝好的 def() 方法進行賦值的

def(res, $stable, isStable)
def(res, $key, key)
def(res, $hasNormal, hasNormalSlots)


• 否則，則對 slots 對象進行遍歷，操作 normalSlots ，賦值給 key 為 key，value 為 normalizeScopedSlot 返回的函數 的對象 res

let res
else {
res = {}
for (const key in slots) {
if (slots[key] && key[0] !== $) {
res[key] = normalizeScopedSlot(normalSlots, key, slots[key])
}
}
}


• 隨後再次對 normalSlots 進行遍歷，若 normalSlots 中的 key 在 res 找不到對應的 key，則直接進行 proxyNormalSlot 代理操作，將 normalSlots 中的 slot 掛載到 res 對象上

for (const key in normalSlots) {
if (!(key in res)) {
res[key] = proxyNormalSlot(normalSlots, key)
}
}

function proxyNormalSlot(slots, key) {
return () => slots[key]
}

• 接著，我們看看 normalizeScopedSlot() 都做了些什麼事情。該方法接收三個參數，第一個參數為 normalSlots，第二個參數為 key，第三個參數為 fn

function normalizeScopedSlot(normalSlots, key, fn) {
const normalized = function () {
// 若參數為多個，則直接使用 arguments 作為 fn 的參數，否則直接傳空對象作為 fn 的參數
let res = arguments.length ? fn.apply(null, arguments) : fn({})
// fn 執行返回的 res 不是數組，則是單 vnode 的情況，賦值為 [res] 即可
// 否則執行 normalizeChildren 操作，這塊主要對針對 slot 中存在 v-for 操作
res = res && typeof res === object && !Array.isArray(res)
? [res] // single vnode
: normalizeChildren(res)
return res && (
res.length === 0 ||
(res.length === 1 && res[0].isComment) // slot 上 v-if 相關處理
) ? undefined
: res
}
// v-slot 語法糖處理
if (fn.proxy) {
Object.defineProperty(normalSlots, key, {
get: normalized,
enumerable: true,
configurable: true
})
}
return normalized
}


round 2. renderSlot

這塊邏輯處理其實和之前是一樣的，只是刪除了一些警告的代碼而已。這點這裡就不展開敘述了

round 3. processSlot

首先，這裡解析 slot 的方法名從 processSlot 變成了 processSlotContent，但其實前面的邏輯和以前是一樣的。只是新增了一些對於 v-slot 的邏輯處理，下面我們就來捋捋這塊。過具體邏輯前，我們先看一些相關的正則和方法

1、相關正則 & functions

• dynamicArgRE 動態參數匹配

const dynamicArgRE = /^[.*]$/ // 匹配到 [] 則為 true，如 [ item ]


• slotRE 匹配 v-slot 語法相關正則

const slotRE = /^v-slot(:|$)|^#/ // 匹配到 v-slot 或 v-slot: 則為 true


• getAndRemoveAttrByRegex 通過正則匹配綁定的 attr 值

export function getAndRemoveAttrByRegex (
el: ASTElement,
name: RegExp //
) {
const list = el.attrsList // attrsList 類型為 Array<ASTAttr>
// 對 attrsList 進行遍歷，若有滿足 RegExp 的則直接返回當前對應的 attr
// 若參數 name 傳進來的是 slotRE = /^v-slot(:|$)|^#/
// 那麼匹配到 v-slot 或者 v-slot:xxx 則會返回其對應的 attr
for (let i = 0, l = list.length; i < l; i++) {
const attr = list[i]
if (name.test(attr.name)) {
list.splice(i, 1)
return attr
}
}
}


• ASTAttr 介面定義

declare type ASTAttr = {
name: string;
value: any;
dynamic?: boolean;
start?: number;
end?: number
};


• createASTElement 創建 ASTElement

export function createASTElement (
tag: string, // 標籤名
attrs: Array<ASTAttr>, // attrs 數組
parent: ASTElement | void // 父節點
): ASTElement {
return {
type: 1,
tag,
attrsList: attrs,
attrsMap: makeAttrsMap(attrs),
rawAttrsMap: {},
parent,
children: []
}
}


• getSlotName 獲取 slotName

function getSlotName (binding) {
// v-slot:item 匹配獲取到 item
let name = binding.name.replace(slotRE, )
if (!name) {
if (binding.name[0] !== #) {
name = default
} else if (process.env.NODE_ENV !== production) {
warn(
`v-slot shorthand syntax requires a slot name.`,
binding
)
}
}
// 返回一個 key 包含 name，dynamic 的對象
// v-slot:[item] 匹配然後 replace 後獲取到 name = [item]
// 進而進行動態參數進行匹配 dynamicArgRE.test(name) 結果為 true
return dynamicArgRE.test(name)
? { name: name.slice(1, -1), dynamic: true } // 截取變數，如 [item] 截取後變成 item
: { name: `"${name}"`, dynamic: false }
}


2、processSlotContent

這裡我們先看看 slot 對於 template 是如何處理的

if (el.tag === template) {
// 匹配綁定在 template 上的 v-slot 指令，這裡會匹配到對應 v-slot 的 attr(類型為 ASTAttr)
const slotBinding = getAndRemoveAttrByRegex(el, slotRE)
// 若 slotBinding 存在，則繼續進行 slotName 的正則匹配
// 隨即將匹配出來的 name 賦值給 slotTarget，dynamic 賦值給 slotTargetDynamic
// slotScope 賦值為 slotBinding.value 或者 _empty_
if (slotBinding) {
const { name, dynamic } = getSlotName(slotBinding)
el.slotTarget = name
el.slotTargetDynamic = dynamic
el.slotScope = slotBinding.value || emptySlotScopeToken
}
}


如果不是 template，而是綁定在 component 上的話，對於 v-slot 指令和 slotName 的匹配操作是一樣的，不同點在於由於這裡需要將組件的 children 添加到其默認插槽中去

else {
// v-slot on component 表示默認插槽
const slotBinding = getAndRemoveAttrByRegex(el, slotRE)
// 將組件的 children 添加到其默認插槽中去
if (slotBinding) {
// 獲取當前組件的 scopedSlots
const slots = el.scopedSlots || (el.scopedSlots = {})
// 匹配拿到 slotBinding 中 name，dynamic 的值
const { name, dynamic } = getSlotName(slotBinding)
// 獲取 slots 中 key 對應匹配出來 name 的 slot
// 然後再其下面創建一個標籤名為 template 的 ASTElement，attrs 為空數組，parent 為當前節點
const slotContainer = slots[name] = createASTElement(template, [], el)
// 這裡 name、dynamic 統一賦值給 slotContainer 的 slotTarget、slotTargetDynamic，而不是 el
slotContainer.slotTarget = name
slotContainer.slotTargetDynamic = dynamic
// 將當前節點的 children 添加到 slotContainer 的 children 屬性中
slotContainer.children = el.children.filter((c: any) => {
if (!c.slotScope) {
c.parent = slotContainer
return true
}
})
slotContainer.slotScope = slotBinding.value || emptySlotScopeToken
// 清空當前節點的 children
el.children = []
el.plain = false
}
}


這樣處理後我們就可以直接在父組件上面直接使用 v-slot 指令去獲取 slot 綁定的值。舉個官方例子來表現一下

• Default slot with text

<!-- old -->
<foo>
<template slot-scope="{ msg }">
{{ msg }}
</template>
</foo>

<!-- new -->
<foo v-slot="{ msg }">
{{ msg }}
</foo>

• Default slot with element

<!-- old -->
<foo>
<div slot-scope="{ msg }">
{{ msg }}
</div>
</foo>

<!-- new -->
<foo v-slot="{ msg }">
<div>
{{ msg }}
</div>
</foo>

更多例子請點擊 new-slot-syntax 自行查閱

round 4. generate

genSlot() 在這塊邏輯也沒發生本質性的改變，唯一一個改變就是為了支持 v-slot 動態參數做了些改變，具體如下

// old
const attrs = el.attrs && `{${el.attrs.map(a => `${camelize(a.name)}:${a.value}`).join(,)}}`

// new
// attrs、dynamicAttrs 進行 concat 操作，並執行 genProps 將其轉換成對應的 generate 字元串
const attrs = el.attrs || el.dynamicAttrs
? genProps(
(el.attrs || []).concat(el.dynamicAttrs || []).map(attr => ({
// slot props are camelized
name: camelize(attr.name),
value: attr.value,
dynamic: attr.dynamic
}))
)
: null

最後

文章到這，對於 普通插槽、作用域插槽、v-slot 基本用法以及其背後實現原理的相關內容已經是結束了，還想要深入了解的同學，可自行查閱 vue 源碼進行研究。

老規矩，文章末尾打上波廣告

前端交流群：731175396

群里不定期進行視頻或語音的技術類分享，歡迎小夥伴吧上車，帥哥美女等著你們呢。

然後，emmm，我要去打籃球了 ~

推薦閱讀：