vue3内置一些组件 比如Transition TransitionGroup KeepAlive Teleport Suspense
Teleport 作用 将其插槽内容渲染到 DOM 中的另一个位置。
-
判断 name属性
-
process 渲染逻辑
2.1.isTeleportDisabled 判断是否警用
2.2.isHmrUpdating 判断是否热更新
2.3.渲染
设置el anchor target targetAnchor 插入placeholder mainAnchor 查询target 插入targetAnchor
设置namespce
moutChildreen
2.4.更新
引用上次 el anchor target targetAnchor
设置namespce
根据dynamicChildren optimized patchBlockChildren traverseStaticChildren patchChildren
2.5.移动
判断前后disbled 4种情况 处理 moveTeleport
2.6.updateCssVars
同步css变量 保证样式作用域正确
const TeleportImpl = {
name: "Teleport",
__isTeleport: true,
process(n1, n2, container, anchor, parentComponent, parentSuspense, namespace, slotScopeIds, optimized, internals) {
const {
mc: mountChildren,
pc: patchChildren,
pbc: patchBlockChildren,
o: { insert, querySelector, createText, createComment }
} = internals;
const disabled = isTeleportDisabled(n2.props);
let { shapeFlag, children, dynamicChildren } = n2;
if (isHmrUpdating) {
optimized = false;
dynamicChildren = null;
}
if (n1 == null) {
const placeholder = n2.el = createComment("teleport start") ;
const mainAnchor = n2.anchor = createComment("teleport end") ;
insert(placeholder, container, anchor);
insert(mainAnchor, container, anchor);
const target = n2.target = resolveTarget(n2.props, querySelector);
const targetAnchor = n2.targetAnchor = createText("");
if (target) {
insert(targetAnchor, target);
if (namespace === "svg" || isTargetSVG(target)) {
namespace = "svg";
} else if (namespace === "mathml" || isTargetMathML(target)) {
namespace = "mathml";
}
} else if (!disabled) {
warn$1("Invalid Teleport target on mount:", target, `(${typeof target})`);
}
const mount = (container2, anchor2) => {
if (shapeFlag & 16) {
mountChildren(
children,
container2,
anchor2,
parentComponent,
parentSuspense,
namespace,
slotScopeIds,
optimized
);
}
};
if (disabled) {
mount(container, mainAnchor);
} else if (target) {
mount(target, targetAnchor);
}
} else {
n2.el = n1.el;
const mainAnchor = n2.anchor = n1.anchor;
const target = n2.target = n1.target;
const targetAnchor = n2.targetAnchor = n1.targetAnchor;
const wasDisabled = isTeleportDisabled(n1.props);
const currentContainer = wasDisabled ? container : target;
const currentAnchor = wasDisabled ? mainAnchor : targetAnchor;
if (namespace === "svg" || isTargetSVG(target)) {
namespace = "svg";
} else if (namespace === "mathml" || isTargetMathML(target)) {
namespace = "mathml";
}
if (dynamicChildren) {
patchBlockChildren(
n1.dynamicChildren,
dynamicChildren,
currentContainer,
parentComponent,
parentSuspense,
namespace,
slotScopeIds
);
traverseStaticChildren(n1, n2, true);
} else if (!optimized) {
patchChildren(
n1,
n2,
currentContainer,
currentAnchor,
parentComponent,
parentSuspense,
namespace,
slotScopeIds,
false
);
}
if (disabled) {
if (!wasDisabled) {
moveTeleport(
n2,
container,
mainAnchor,
internals,
1
);
} else {
if (n2.props && n1.props && n2.props.to !== n1.props.to) {
n2.props.to = n1.props.to;
}
}
} else {
if ((n2.props && n2.props.to) !== (n1.props && n1.props.to)) {
const nextTarget = n2.target = resolveTarget(
n2.props,
querySelector
);
if (nextTarget) {
moveTeleport(
n2,
nextTarget,
null,
internals,
0
);
} else {
warn$1(
"Invalid Teleport target on update:",
target,
`(${typeof target})`
);
}
} else if (wasDisabled) {
moveTeleport(
n2,
target,
targetAnchor,
internals,
1
);
}
}
}
updateCssVars(n2);
},
remove(vnode, parentComponent, parentSuspense, optimized, { um: unmount, o: { remove: hostRemove } }, doRemove) {
const { shapeFlag, children, anchor, targetAnchor, target, props } = vnode;
if (target) {
hostRemove(targetAnchor);
}
doRemove && hostRemove(anchor);
if (shapeFlag & 16) {
const shouldRemove = doRemove || !isTeleportDisabled(props);
for (let i = 0; i < children.length; i++) {
const child = children[i];
unmount(
child,
parentComponent,
parentSuspense,
shouldRemove,
!!child.dynamicChildren
);
}
}
},
move: moveTeleport,
hydrate: hydrateTeleport
};
function moveTeleport(vnode, container, parentAnchor, { o: { insert }, m: move }, moveType = 2) {
if (moveType === 0) {
insert(vnode.targetAnchor, container, parentAnchor);
}
const { el, anchor, shapeFlag, children, props } = vnode;
const isReorder = moveType === 2;
if (isReorder) {
insert(el, container, parentAnchor);
}
if (!isReorder || isTeleportDisabled(props)) {
if (shapeFlag & 16) {
for (let i = 0; i < children.length; i++) {
move(
children[i],
container,
parentAnchor,
2
);
}
}
}
if (isReorder) {
insert(anchor, container, parentAnchor);
}
}
function hydrateTeleport(node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized, {
o: { nextSibling, parentNode, querySelector }
}, hydrateChildren) {
const target = vnode.target = resolveTarget(
vnode.props,
querySelector
);
if (target) {
const targetNode = target._lpa || target.firstChild;
if (vnode.shapeFlag & 16) {
if (isTeleportDisabled(vnode.props)) {
vnode.anchor = hydrateChildren(
nextSibling(node),
vnode,
parentNode(node),
parentComponent,
parentSuspense,
slotScopeIds,
optimized
);
vnode.targetAnchor = targetNode;
} else {
vnode.anchor = nextSibling(node);
let targetAnchor = targetNode;
while (targetAnchor) {
targetAnchor = nextSibling(targetAnchor);
if (targetAnchor && targetAnchor.nodeType === 8 && targetAnchor.data === "teleport anchor") {
vnode.targetAnchor = targetAnchor;
target._lpa = vnode.targetAnchor && nextSibling(vnode.targetAnchor);
break;
}
}
hydrateChildren(
targetNode,
vnode,
target,
parentComponent,
parentSuspense,
slotScopeIds,
optimized
);
}
}
updateCssVars(vnode);
}
return vnode.anchor && nextSibling(vnode.anchor);
}
const Teleport = TeleportImpl;
function updateCssVars(vnode) {
const ctx = vnode.ctx;
if (ctx && ctx.ut) {
let node = vnode.children[0].el;
while (node && node !== vnode.targetAnchor) {
if (node.nodeType === 1)
node.setAttribute("data-v-owner", ctx.uid);
node = node.nextSibling;
}
ctx.ut();
}
}
