vue 的插槽实现原理 之 作用域插槽
前言
由于知识点过于密集，需要慢慢梳理于是将插槽的实现原理分为了上下两篇
接上篇文章 vue 的插槽实现原理 之 具名插槽 的续集，这次来讲讲作用域插槽的实现
相信有了上一篇文章的学习对这篇文章也会更容易理解😂
作用域插槽的实现
与具名插槽不同的是作用域插槽能够让父组件的插槽内容访问到子组件的数据，实现数据的互通，所以作用域插槽的实现与具名插槽的实现也会有所不同。
先看看作用域插槽的使用：
<!-- 父组件 -->
<div>
<child>
<!-- 父组件通过v-slot:[name]=[props]的形式拿到子组件传递的值 -->
<template v-slot:hello="props">
<p>hello from parent {{props.text + props.msg}}</p>
</template>
</child>
</div>
<!-- 子组件中以属性的方式传递参数 -->
<div class="child">
<slot text="123" name="hello" :msg="msg"></slot>
</div>
作用域插槽和具名插槽在父组件的用法基本相同，区别在于 v-slot 定义了一个插槽 props 的名字，通过 props 父组件可以访问到子组件的数据。
父组件编译后的结果：
with (this) {
return _c(
'div',
[
_c('child', {
scopedSlots: _u([ // _u 执行的是 resolveScopedSlots
{
key: 'hello', // 插槽名
fn: function (props) { // 创建插槽内容的VNode
return [
_c('p', [
_v(
'hello from parent ' +
_s(props.text + props.msg) // 从传入的 props 中拿值
),
]),
]
},
},
]),
}),
],
1
)
}
通过观察能够发现作用域插槽中有一个 scopedSlots 属性，属性值是_u 函数
这个 scopedSlots 是不是有点眼熟，之前在 initRender() 插槽初始化的时候是不是见到过子组件上挂载的 $scopedSlots 属性，看来这是跟子组件的编译关联上了。
在父组件创建 VNode 时，执行 scopedSlots 属性内的_u 方法，这里的_u 方法就是对应的 resolveScopedSlots
target._u = resolveScopedSlots;
function resolveScopedSlots (
fns, // 作用域插槽数组， [{key:xxx, fn:()=>{}] key 对应的插槽名称， fn 为对应的渲染函数
res,
// the following are added in 2.6
hasDynamicKeys,
contentHashKey
) {
// 如果没有传入 res，则创建一个对象；
// 对象内有一个 $stable 属性，如果不是动态属性名 (即插槽上没有 v-for、没有 v-if 则为 true)
res = res || { $stable: !hasDynamicKeys };
for (var i = 0; i < fns.length; i++) {
var slot = fns[i];
if (Array.isArray(slot)) {
resolveScopedSlots(slot, res, hasDynamicKeys);
} else if (slot) {
// 如果这个插槽没有指定作用域，则通过 proxy 标记来指示 slot.fn 函数是一个代理函数。
if (slot.proxy) {
slot.fn.proxy = true; // 这个代理函数可以将插槽的内容渲染到父级组件的作用域中，以实现作用域插槽的传递。
}
// 将其转化为对象格式，添加到 res 对象中，其中插槽的 key 属性作为 res 对象的属性名，插槽的 fn 属性作为 res 对象的属性值
res[slot.key] = slot.fn;
}
}
if (contentHashKey) {
(res).$key = contentHashKey;
}
return res
}
resolveScopedSlots() 的主要目的是在于解析作用域插槽，将其转化为对象格式。
通过遍历父级作用域插槽 fns 数组中的插槽信息，每个作用域插槽会有相应的渲染函数，将该函数存储在返回的对象中，而这个函数的作用就是生成 VNode。
最终 resolveScopedSlots 返回的对象包含了所有作用域插槽的函数，子组件可以通过插槽名称来获取对应的 VNode 数组。
子组件的编译
当创建子组件实例时，调用 initInternalComponent() 初始化子组件实例的属性和选项信息。在 initRender() 初始化 vm.$scopedSlots 属性时 vm.$scopedSlots = emptyObject
将 $scopedSlots 属性初始化为一个空对象，当子组件接收到父组件传递过来的作用域插槽时，$scopedSlots 属性会被更新为包含这些插槽函数的对象。
在子组件数据初始化直接进入到编译环节，最终得到的编译结果为：
with(this){
return _c(
"div",
{ staticClass: "child" },
[_t("hello", null, { text: "123", msg: msg })], // 这里
2
);
}
代码中标签也被转换成了_t函数，对比具名插槽，作用域插槽的_t 函数多了一个参数，由子组件中的响应式属性组成的对象
经过子组件的挂载过程中执行 render 函数创建 VNode 时，_render 中有这样一段逻辑
function mountComponent (
vm: Component,
el: ?Element,
hydrating?: boolean
): Component {
...
callHook(vm, 'beforeMount')
updateComponent = () => {
vm._update(vm._render(), hydrating)
}
new Watcher(vm, updateComponent, noop, {
before () {
if (vm._isMounted && !vm._isDestroyed) {
callHook(vm, 'beforeUpdate')
}
}
}, true /* isRenderWatcher */)
hydrating = false
if (vm.$vnode == null) {
vm._isMounted = true
callHook(vm, 'mounted')
}
return vm
}
// _render 上挂载的方法
function renderMixin (Vue: Class<Component>) {
Vue.prototype._render = function (): VNode {
const vm: Component = this
const { render, _parentVnode } = vm.$options
// 如果存在父组件，说明当前正在创建子组件的渲染VNode
if (_parentVnode) {
// 传入组件 VNode 的 scopedSlots属性、vm.$slots (空对象)、vm.$scopedSlots (空对象)
vm.$scopedSlots = normalizeScopedSlots(
_parentVnode.data.scopedSlots,
vm.$slots,
vm.$scopedSlots
)
}
...
vnode.parent = _parentVnode
return vnode
}
}
normalizeScopedSlots 将作用域插槽对象标准化为统一的格式，以便在渲染过程中进行处理：
这里传入的参数 _parentVnode.data.scopedSlots 来自于父组件创建渲染 VNode 时，调用 _u 方法返回的对象，对象的属性名是插槽名称，属性值是创建插槽内容VNode的渲染函数。
接下来看看 normalizeScopedSlots 中的具体实现：
function normalizeScopedSlots (
slots: { [key: string]: Function } | void, // 作用域插槽对象
normalSlots: { [key: string]: Array<VNode> }, // 普通插槽
prevSlots?: { [key: string]: Function } | void // 上一次处理过的作用域插槽对象
): any {
let res
const hasNormalSlots = Object.keys(normalSlots).length > 0
// $stable 在 _u 中定义
const isStable = slots ? !!slots.$stable : !hasNormalSlots
const key = slots && slots.$key
if (!slots) {
// slot 为空则直接返回
res = {}
} else if (slots._normalized) {
// 如果 slots 已经被标准化过，则直接返回标准化后的对象
return slots._normalized
} else if (...) {
...
} else {
// 从这里开始进入重要创建过程
res = {}
// 遍历传入的 $slots，对每个属性值调用 normalizeScopedSlot 创建并返回一个 normalized 的函数
for (const key in slots) {
if (slots[key] && key[0] !== '$') {
res[key] = normalizeScopedSlot(normalSlots, key, slots[key])
}
}
}
// 函数遍历 普通插槽（即非作用域插槽对象中的所有属性将 slot 代理到 scopeSlots 上
for (const key in normalSlots) {
if (!(key in res)) {
// 通过代理函数 proxyNormalSlot 将普通插槽内容转换成作用域插槽格式，以便在子组件中进行处理和渲染。
res[key] = proxyNormalSlot(normalSlots, key)
}
}
// 将生成的对象 res 挂载到 slots._normalized 上
if (slots && Object.isExtensible(slots)) {
(slots: any)._normalized = res
}
// 将 $stable、$key、$hasNormal 添加到 res 中，并不可枚举
def(res, '$stable', isStable)
def(res, '$key', key)
def(res, '$hasNormal', hasNormalSlots) // vm.$slots 有属性则为 true，反之为 false
return res
}
// ----------------------
// 将 slot 代理到 scopeSlots 上
function proxyNormalSlot(slots, key) {
return () => slots[key]
}
normalizeScopedSlots 函数的核心是为了生成并返回 res 对象，其中对象 key 是插槽名称，value 就是normalizeScopedSlot 函数返回返回的 normalized函数
vm.$scopedSlots 为 normalizeScopedSlots 执行时返回的 res。
在 normalizeScopedSlot 中又发生了些什么：
function normalizeScopedSlot(normalSlots, key, fn) {
// normalSlots： 是一个对象，包含了普通插槽的 VNode 数组
// key 作用域插槽的名称
// fn 是 genSlots 返回的对象 {key: '', fn:''} 中的 fn
const normalized = function () {
// 将 fn 函数的属性和方法挂载到 normalized 函数上，
// 在调用 normalized 函数时就可以访问到这些属性和方法，以便创建插槽的 VNode
let res = arguments.length ? fn.apply(null, arguments) : fn({})
res = res && typeof res === 'object' && !Array.isArray(res)
? [res] // single vnode
: normalizeChildren(res)
let vnode: ?VNode = res && res[0]
return res && (
!vnode ||
(res.length === 1 && vnode.isComment && !isAsyncPlaceholder(vnode)) // #9658, #10391
) ? undefined
: res
}
if (fn.proxy) { // 对于作用域插槽来说 fn.proxy 为 false。
Object.defineProperty(normalSlots, key, {
get: normalized,
enumerable: true,
configurable: true
})
}
return normalized
}
在 normalizeScopedSlot 中创建了一个名为 normalized 的函数，并将作用域插槽对象的属性和方法挂载到这个函数上，通过闭包将这个函数返回，以便在后续的渲染过程中使用。
创建子组件的 VNode
在 vm.$scopedSlots 赋值完成后，继续执行子组件的 render 函数，遇到<slot>标签时执行 _t 函数即 renderSlot 创建对应的插槽 VNode ，这是就要用到 _t() 的第三个参数了。
function renderSlot (
name: string,
fallbackRender: ?((() => Array<VNode>) | Array<VNode>),
props: ?Object,
bindObject: ?Object
): ?Array<VNode> {
const scopedSlotFn = this.$scopedSlots[name]
let nodes
if (scopedSlotFn) { // 作用域插槽
props = props || {}
if (bindObject) {
...
// 合并 props
props = extend(extend({}, bindObject), props)
}
// 调用 normalized 时传入子组件要传递给的父组件的 props 值
nodes =
scopedSlotFn(props) ||
(typeof fallbackRender === 'function' ? fallbackRender() : fallbackRender)
} else {
// ...
}
...
}
根据传入的插槽名称从 $scopedSlots 中获取对应 normalized 函数，并将子组件插槽中的 props 作为参数传递给执行函数执行。
在 normalized 中会执行插槽的渲染函数，并传入 props 创建 VNode、对使用到的属性做依赖收集。至此作用域插槽创建 VNode 过程就结束了。
作用域插槽创建的过程
在父组件编译和渲染阶段并不会直接生成作用域插槽的 VNode，而是会在父组件 VNode 中保留一个 scopedSlots 对象，其中存储着不同名称的插槽及对应的渲染函数。
创建子组件实例时，将属性挂载到 vm.$scopedSlots中；在创建子组件的渲染 VNode 时，将子组件中的响应式数据传入并执行这个渲染函数，从而完成作用域插槽的 VNode 创建；创建过程中会将子组件的 Render Watcher添加到响应式属性的 dep.subs 中。
所以可以理解为作用域插槽的 VNode 是在子组件中生成的。
插槽实现的区别
在 vue 的实现中具名插槽和作用域插槽的实现方式还是有着很大的区别的：
-
在渲染父组件的时会编译插槽节点，在后续创建子组件时，将对应的 slot 节点替换为父组件的 VNode（插槽的作用域为父组件，插槽中内容显示由父组件来决定）
-
作用域插槽在渲染父组件时会将插槽解析成函数，当子组件渲染时，会调用此函数进行渲染。（插槽的作用域为子组件）
因此，具名插槽和作用域插槽的主要区别在于它们数据传递的方式不同，具名插槽只能传递静态数据，而作用域插槽可以传递动态数据。
来张图结束今天的学习内容：关于插槽创建的流程
（图片来自于：什么是作用域插槽？插槽与作用域插槽的区别）
总结
今日份碎碎念
在研究插槽原理的时候我也碰到了许多问题，比如父子组件创建过程中数据是如何进行传递的；还有 normalizeScopedSlots、normalizeScopedSlot 这两个函数长得为啥那么像，他俩又到底做了什么。
每一个问题都困惑了我好久，一次次的看源码梳理组件流程，一边学习一边输出，终于完成了6月的第 21 次更文。
但是我也始终觉得对插槽的理解还是不够透彻，就暂且将这两篇文章做个开始，如果有出错的地方请大家及时指出😛，也有利于后续对知识点的查漏补缺。
参考
转载自:https://juejin.cn/post/7245836790040330298