当前位置：首页 > news >正文

Vue3 源码解读系列（十一）——插槽 slot

news 2025/8/25 13:12:14

slot

插槽的实现实际上就是一种 延时渲染，把父组件中编写的插槽内容保存到一个对象上，并且把具体渲染 DOM 的代码用函数的方式封装，然后在子组件渲染的时候，根据插槽名在对象中找到对应的函数，然后执行这些函数做真正的渲染。

/*** 创建 vnode*/
function createVNode(type, props = null, children = null) {if (props) {// 处理 props 相关逻辑，标准化 class 和 style}// 对 vnode 类型信息编码// 创建 vnode 对象const vnode = {type,props,// 其他一些属性}// 标准化子节点，把不同数据类型的 children 转成数组或者文本类型normalizeChildren(vnode, children)return vnode
}/*** 标准化子节点，以及获取 vnode 节点类型 shapeFlag，shapeFlag 最终为 SLOTS_CHILDREN | STATEFUL_COMPONENT*/
function normalizeChildren(vnode, children) {let type = 0const { shapeFlag } = vnode// 没有子节点if (children === null) {children = null}// 子节点为数组else if (isArray(children)) {type = 16 /* ARRAY_CHILDREN */}// 子节点为对象else if (typeof children === 'object') {// 子节点为元素或 teleportif ((shapeFlag & 1/* ELEMENT */ || shapeFlag & 64 /* TELEPORT */) && children.default) {normalizeChildren(vnode, children.default())return}// 子节点为 slotelse {type = 32/* SLOTS_CHILDREN */const slotFlag = children._if (!slotFlag && !(InternalObjectKey in children)) {children._ctx = currentRenderinglnstance}// 处理类型为 FORWARDED 的情况else if (slotFlag === 3 /* FORWARDED */ && currentRenderinglnstance) {// 动态插槽if (currentRenderingInstance.vnode.patchFlag & 1024/* DYNAMIC_SLOTS */) {children._ = 2/* DYNAMIC */vnode.patchFlag |= 1024 /* DYNAMIC SLOTS */}// 静态插槽else {children._ = 1/* STABLE */}}}}// 子节点为函数else if (isFunction(children)) {children = { default: children, _ctx: currentRenderinglnstance }type = 32/* SLOTS_CHILDREN */}// 其他子节点else {children = String(children)// teleport 类型if (shapeFlag & 64/* TELEPORT */) {type = 16/* ARRAY_CHILDREN */children = [createTextVNode(children)]}// 文本类型else {type = 8/* TEXT_CHILDREN */}}vnode.children = childrenvnode.shapeFlag |= type
}/*** 初始化 Slots*/
const initSlots = (instance, children) => {if (instance.vnode.shapeFlag & 32/* SLOTS_CHILDREN */) {const type = children._if (type) {instance.slots = childrendef(children, '_', type)} else {normalizeObjectSlots(children, (instance.slots = {}))}} else {instance.slots = {}if (children) {normalizeVNodeSlots(instance, children)}}def(instance.slots, InternalObjectKey, 1)
}/*** 渲染 slot DOM* @param {Object} slots - 插槽对象 instance.slots* @param {string} name - 插槽名*/
function renderSlot(slots, name, props = {}, fallback) {// 根据 name 获取对应插槽函数let slot = slots[name]// 通过 createBlock 创建 vnode 节点，类型为 Fragment，children 是执行 slot 插槽函数的返回值return (openBlock(), createBlock(Fragment, { key: props.key }, slot ? slot(props) : fallback ? fallback() : [], slots._ === 1/* STABLE */ ? 64/* STABLE_FRAGMENT */ : -2/* BAIL */));
}/*** 保证子组件中渲染具体插槽内容，保证它的数据作用域也是父组件*/
function withCtx(fn, ctx = currentRenderinglnstance) {if (!ctx) return fnreturn function renderFnWithContext() {// 保存当前渲染的组件实例 ownerconst owner = currentRenderingInstance// 把 ctx 设置为当前渲染的实例setCurrentRenderinglnstance(ctx)// 执行 fnconst res = fn.apply(null, arguments)// 把 ctx 设置为当前渲染的实例setCurrentRenderingInstance(owner)return res}
}/*** 处理 <Fragment>*/
const processFragment = (nl, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {const fragmentStartAnchor = (n2.el = n1 ? nl.el : hostCreateText(''))const fragmentEndAnchor = (n2.anchor = n1 ? nl.anchor : hostCreateText(''))let { patchFlag } = n2if (patchFlag > 0) {optimized = true}// 插入节点if (n1 == null) {// 先在前后插入两个空文本节点hostInsert(fragmentStartAnchor, container, anchor)hostInsert(fragmentEndAnchor, container, anchor)// 再挂载子节点mountChildren(n2.children, container, fragmentEndAnchor, parentComponent, parentSuspense, isSVG, optimized)}//更新节点else { }
}