Teleport 弹窗尺寸为什么会丢（4）：首次打开的变量漏填与修复
一次账号编辑弹窗的排查里，右上角头像点开的弹窗仍然是 375px，点进「基本信息」后的编辑弹窗却窄得像不到 200px。两个弹窗复用同一个公共外壳，宽度也都传了 375px。差异出现在外壳把尺寸从模板 :style 改成 CSS v-bind() 之后。
项目里的公共弹窗用 Teleport 把弹窗内容挂到 body 下。业务页面仍然在原来的组件位置写 <CommonModal>，弹窗的真实 DOM 则放到外面，避开页面容器的裁剪和定位影响。
弹窗丢失宽度，是因为新建的 DOM 根漏掉了 CSS 变量回填。Teleport 把元素放到原组件 DOM 之外，变量不能再靠原祖先继承；Transition 的内部组件独立执行 v-if，创建了新元素，却没经过外层 Teleport 原有的回填调用点。新元素因而缺少 Vue 用来识别变量归属的 data-v-owner 标记，变量更新器找不到它，CSS v-bind() 也就取不到宽度和颜色。
应用层可以把关键尺寸改用模板 :style，直接写到弹窗节点；本文的候选补丁则在内部组件换根后补 owner，再写入变量。Transition 是这个例子的更新入口，普通插槽组件独立换根也可能触发同类问题。
2026-10-27 核验时，最新稳定版 Vue 3.5.44 仍然复现；版本以 Vue 正式发布和 npm 的 latest为准。下文的示例固定使用这个版本，源码链接锁定 v3.5.44，讨论的是 VDOM runtime。候选补丁仍是本地方案，下载文件和历史测量保留各自的 Git 基线与日期。
系列目录见Teleport 弹窗尺寸为什么会丢。上一篇：Teleport 弹窗尺寸为什么会丢（3）：CSS v-bind 怎样编译与更新变量。
首次打开时的最小复现
下面演示的是「JavaScript 里有宽度，真实弹窗却没拿到变量」。App.vue 里的 boxWidth 初值为 240px，boxColor 初值为 red；模板将条件元素放在 Teleport → Transition 里，样式使用 width: v-bind(boxWidth) 和 color: v-bind(boxColor)。初始 open=false，目标容器里只有占位，没有弹窗元素。
按下面的顺序操作，每一步只改一个条件：
| 操作 | 应该观察什么 | 这一步发生了什么 |
|---|---|---|
| ① 点击「打开弹窗」 | 源宽度仍为 240px，弹窗却按内容收缩；owner 不存在 | 内部组件新建了元素，漏掉 owner 和变量回填 |
| ② 点击「只改宽度为 280px」 | 宽度变成 280px，文字也恢复红色 | 这组普通 Teleport 的外层已订阅宽度；后续更新为已存在的根补上变量 |
| ③ 关闭后再打开 | 源宽度保持 280px，新元素却再次收缩、丢色 | 旧元素已销毁，新根又经过同一条遗漏路径 |
复现首次打开时的变量缺失正在加载代码工作区...
预览下方 #modals 中的「资料编辑」框就是被检查的元素。上方表格对照源值与实测值；展开「节点检查数据」可以看到 owner 和内联变量。编辑器默认打开 App.vue，观察控件单独放在 ReproControls.vue，避免检查结果自己的刷新影响外层组件的更新。
示例用 inline-block 让缺少宽度变量的元素按内容收缩，方便观察；它没有模拟遮罩和固定定位。业务弹窗的最终尺寸还取决于自身布局。这里关闭了 Transition 的 CSS 动画，仍保留内部组件与插槽，因此现象来自更新路径，不需要等待动画。重载预览可恢复初值。
与故障有关的协作
Teleport 把内容放到外部 target；Transition 的内部 render 调用插槽，并可能独立把注释替换成真实根；CSS v-bind() 生成的变量，则需要先给这个外置根补 owner，再写入值。这里缺的是新根插入之后的回填时机。
Teleport 弹窗尺寸为什么会丢（1）：Teleport 怎样管理两个 DOM 位置。
Teleport 弹窗尺寸为什么会丢（2）：Transition 怎样协调创建和移除。
Teleport 弹窗尺寸为什么会丢（3）：CSS v-bind 怎样编译与更新变量。
问题出现在内部组件独立更新时
业务外壳使用 Teleport → Transition → v-if 弹窗根，并用 CSS v-bind() 设置宽度等尺寸。原始组件结构与样式片段见业务弹窗的尺寸绑定弹窗。
下面的浏览器对照使用同样的组合，将宽度固定为 375px，元素设为普通块级布局。在 1000 × 640 的视口里，正式版首次打开时宽度变成 928px，颜色回到继承值。检查可见元素，scoped 标记仍在，缺少的却是 data-v-owner 和内联 CSS 变量。
同一复现应用候选补丁后，首次打开就是 375px、红色，owner 和变量同时存在；宽度源值没有经过第二次赋值。
这里的 928px 来自页面可用宽度：视口 1000px，左右各留 36px。它不是缺陷固定产生的尺寸；原业务弹窗还会受到自身布局和内容影响。正式版与候选补丁的三条路径对照见浏览器原始记录弹窗。
Transition 的子节点通过插槽生成，v-if 依赖可以在内部组件渲染时被读取。切换这个依赖，会更新内部组件的子树，却不一定让外层 Teleport 再走一次 patch。真实 DOM 因此已经插进 target，Teleport 的 updateCssVars() 却没在这次插入后执行。
插槽的 VNode 仍可归外层组件所有，但本次读取由 BaseTransition 的 effect 收集。withCtx() 恢复的是 VNode 的渲染归属，不会把正在执行的响应式 effect 换成外层组件。
这也解释了为什么重新调用 CSS 变量更新器未必有用：ctx.ut() 只找已有 owner 标记的节点，新节点恰好没有标记，扫描时还是会漏掉它。修复需要先补 owner，再回填变量。
当前 useCssVars.ts 虽然还有 MutationObserver，但监听的是 instance.subTree.el!.parentNode 的直接子节点变化，没有为每个 Teleport target 建立观察。因此，原位置以外的 target 插入新元素，并不保证触发这份观察；即使触发变量更新，也仍然需要新元素先有 owner 标记。
复现分别记录节点结构、computed width、颜色、owner 标记和 inline 变量，并检查首次补值与后续更新。不同视口下的宽度不能直接比较。完整内容见Teleport 的完整复现与复测弹窗。
影响的是变量注入，还是整个 Teleport 更新
这次缺陷直接漏掉的是 SFC CSS 变量的 owner 标记和回填，不是把整个子组件 patch 跳过。静态 class、普通 props 和事件仍有各自的处理路径。但变量失效可能影响宽高、颜色、位移或其他 CSS 属性；业务代码如果接着读取错误的 DOMRect 初始化图表、裁剪或定位，也可能受到间接影响，不能把后果限定为一个宽度值。
静态 scoped 样式、模板 :style、props、emit 和 inject 在对照中均正常。只依赖原 DOM 祖先的手写变量，也可能因 Teleport 换了祖先而失效，但那属于 CSS 继承变化。普通插槽组件独立换根同样能触发 owner 漏填，因此 Transition 是本文的触发方式，并非这个缺陷唯一的入口。对照表与实测范围见样式与组件行为对照弹窗。
后续更新可能掩盖首次漏填
上游第一次打开时，新节点宽度是铺满可用区域的 928px；只更新里面的文字，文字已经改变，宽度仍然是 928px。随后只把 CSS 绑定的宽度改成 450px，颜色仍保持 red，这个页面的外层组件也发生更新，Teleport 再次进入自己的更新流程，节点获得 owner，样式恢复。
普通 Teleport 首次挂载时，CSS getter 的读取发生在外层 render / patch 尚未结束的阶段；外层因此订阅了宽度。这组对照的依赖分布如下：
| 读取 | 发生在哪段执行中 | 变化后触发什么 |
|---|---|---|
插槽中的 open |
BaseTransition 的 render effect | 内部子树把注释换成弹窗根 |
| 首次挂载时 CSS getter 读取宽度、颜色 | 外层 render / patch 尚未结束 | 后续改宽度会再次 patch 外层 Teleport |
| mounted 后 CSS watch 读取同一 getter | CSS watch 自己的 effect | 按已有 owner 查节点并写变量 |
因此，只改宽度时，外层重新处理了已经存在的弹窗根，补上 owner，宽度与颜色一并恢复。CSS watch 自己只有查找已有 owner 的能力。defer 会改变首次 getter 执行时是否仍有外层 effect；插槽外也读取 open，又可能让外层先于内部新根更新。完整源码、编译产物和三组时序对照见依赖收集与恢复路径弹窗。
上游 issue 与候选修复
截至 2026-10-24 查询，#7312、#7344 和 #7364 仍然 open。两个旧 PR 的方案、维护者反馈和 #7344 遗漏用例的复测，见上游讨论与遗漏场景弹窗。公开讨论没有给出 #7344 最终未合并的定论；#7364 中则明确提出了观察 body 直接子节点的开销问题。
为什么手动 :style 能绕开
业务项目最后没有继续用 scoped CSS v-bind() 承载弹窗尺寸，而是把关键尺寸写成稳定 CSS 变量，并通过模板 :style 挂到实际 DOM 节点上：
<div class="common-modal" :style="modalFrameStyle">
<div class="common-modal__dialog" :style="dialogStyle">
<slot />
</div>
</div>const dialogStyle = computed(() => ({
'--common-modal-dialog-width': dialogWidth.value,
'--common-modal-dialog-min-width': dialogMinWidth.value,
'--common-modal-dialog-max-width': dialogMaxWidth.value,
'--common-modal-dialog-height': dialogHeight.value,
'--common-modal-dialog-max-height': dialogMaxHeight,
})).common-modal__dialog {
width: var(--common-modal-dialog-width);
min-width: var(--common-modal-dialog-min-width);
max-width: var(--common-modal-dialog-max-width);
height: var(--common-modal-dialog-height);
max-height: var(--common-modal-dialog-max-height);
}这里看起来也在用 CSS 变量，但变量来源已经不同了。v-bind() 的变量要靠 useCssVars() 找 owner 节点后注入；模板 :style 是 Vue patch 当前 vnode 时直接写到这个元素的 style 属性上，不依赖 data-v-owner，也不依赖 Teleport 后续再扫描。
两条路径最终都由 CSS 的 var() 消费。显式 :style 避开了本文遇到的 owner 标记依赖。
图中左侧链路在 Teleport + Transition + v-if 后插入时会丢 owner；右侧链路不需要 owner，所以能避开这个 Vue 边界。
保留节点的 v-show / keepMounted、增加 wrapper 或提升全局变量都有各自的生命周期与多实例代价，详见其他应用层方案的取舍弹窗。
修复的是缺失的调用路径
updateCssVars() 是 Teleport 的内部函数，源码里有多处调用。这次问题不在于某一处传错参数，而在于内部组件独立更新时，没有进入这些调用所在的流程。候选补丁保留原有调用，再补一条从内容组件更新触发的路径。
原有调用点为什么没有走到
按 Vue 3.5.44 的源码，原有五处调用分别位于：
| 所在位置 | 调用时机 | 原有调用 |
|---|---|---|
mountToTarget() |
内容首次挂到 target 后 | updateCssVars(vnode, false) |
queuePendingMount() 的挂载任务 |
延后挂载，且处于 disabled 状态时 | updateCssVars(vnode, true) |
process() 的首次挂载分支 |
立即在原位置挂载 disabled Teleport 后 | updateCssVars(n2, true) |
process() 的更新分支末尾 |
Teleport 自身完成子节点更新和必要移动后 | updateCssVars(n2, disabled) |
hydrateTeleport() |
在有效 target 上接管已有节点后 | updateCssVars(vnode, disabled) |
第四处调用只覆盖 Teleport 自身的更新。Vue 可以直接更新某个内部组件，不必每次从外层组件重新渲染下来；弹窗 DOM 发生变化，并不意味着外层 Teleport 也进入了 process() 的更新分支。
以这个结构为例，假设 open 只在 Transition 的插槽渲染中被读取：
<Teleport to="body">
<Transition>
<div v-if="open" class="modal" />
</Transition>
</Teleport>open 从 false 变成 true，可以只触发 Transition 内部组件的渲染 effect。renderer 对比它的新旧子树，把注释占位换成 <div>，这个过程称为 patch。外层 Teleport 没有重新进入 process()，自然不会走到更新分支末尾的 updateCssVars(n2, disabled)。
此时没有发生新的 Teleport 挂载，也不是 hydration，其他四处调用同样不会触发。结果是新 DOM 已经插进 target，owner 标记却没有补上。仅修改原来那一行调用的参数，仍然无法覆盖这条绕过它的更新路径。
阶段一：首次挂载时安装检查
初始 open=false 时，弹窗 <div> 还不存在，但 Transition 的组件实例和注释占位已经存在。Teleport 本身仍然正常挂载，因此原有 mountToTarget() 会执行：
mount(vnode, target, targetAnchor)
updateCssVars(vnode, false)补丁利用这次已有的 updateCssVars() 调用，在原来的补标记和变量回填之后，为内容组件安装检查。下面保留候选补丁中新增的登记分支：
if (vnode.shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
const update = () => {
if (!ctx.isUnmounted) updateCssVars(vnode, isDisabled, true)
}
;(vnode.children as VNode[]).forEach(child =>
setCssVarsUpdateHooks(child, update),
)
}setCssVarsUpdateHooks() 找到这些内容组件，保存当前真实根节点，并注册 onUpdated。检查挂在组件实例上，不要求弹窗 <div> 已经存在；这时保存的根可以是注释占位。
这里的箭头函数只是创建一个名为 update 的回调，再交给登记函数保存。它不会在创建时立即执行，所以不是在 updateCssVars() 中无条件递归调用自己。这个阶段完成的是「把后续检查装好」。只有 owner 使用了 useCssVars()、存在 ctx.ut 时，才进入这套登记。
阶段二：内部组件更新后触发回填
随后 open=true，Transition 内部完成子树 patch，原来的注释换成新的 <div>。此前安装的 onUpdated 检查此时发现真实根引用改变，执行：
if (changed) {
state.roots = roots
queuePostRenderEffect(state.update, instance.suspense)
}state.update 就是首次登记时保存、后续随 Teleport 状态更新的刷新回调。队列执行它时，才进入新增的 updateCssVars(vnode, isDisabled, true) 调用：重新遍历当前 Teleport 的锚点范围，给新 <div> 补 owner，再合并执行同一 owner 的 ctx.ut()，把变量写进去。
如果只改文字、真实根 DOM 没换，changed 为假，这次额外回填就不会执行。变量值本身变化时，仍由 useCssVars() 原来的响应式更新处理。
首次挂载调用负责安装检查，后续回调在内容根变化后补 owner 和变量；deferUpdate 再把同一 owner 的变量写入请求合并，减少重复扫描。
defer 和外层读取 open 的首次打开回归
2026-10-27 的四组回归覆盖 defer 开关与外层是否读取 open 的组合。初始 open=false，等待首次挂载完成，再只切换 open；宽度一直是 375px，颜色一直是 red，Transition 使用 css: false 关闭 CSS 动画。每组检查首次打开和两次关闭重开，每次都在这一轮 await nextTick() 后读取新节点的 owner、CSS 变量和布局。
下表是生产版 runtime 的浏览器结果，视口 1000 × 640，body 外边距为 36px。三次打开都会生成新的弹窗元素：
| 配置 | 上游的三次打开 | 补丁后的三次打开 |
|---|---|---|
普通 Teleport，外层不读取 open |
928px，缺 owner | 375px，owner 正确 |
开启 defer，外层不读取 open |
928px，缺 owner | 375px，owner 正确 |
普通 Teleport，外层也读取 open |
928px，缺 owner | 375px，owner 正确 |
开启 defer，外层也读取 open |
928px，缺 owner | 375px，owner 正确 |
开启 defer 时，检查仍会登记。queuePendingMount() 只把首次挂载放进渲染后的队列；它执行 mountToTarget() 时，仍会在内容挂载后调用原有的 updateCssVars()。补丁就在这次调用中找到内部组件、记录注释根，并把 onUpdated 检查显式挂到对应实例。登记不依赖外层 render effect 是否还在执行。因此，即使宽度没有成为外层的依赖，后面的 BaseTransition 根替换仍会触发检查。
外层也读取 open 时，提前回填不会替代根替换后的检查。外层先更新、目标里还是注释时，原有回填可能仍然找不到新元素；内部实例上的检查会继续保留。Teleport 再次经过登记函数时，会通过 existing.update = update 保存针对当前 VNode 的回调。等内部组件真正把注释换成 div，onUpdated 比较新旧根引用，才安排这份回调执行。
这两条路径最终都调用 updateCssVars(vnode, isDisabled, true)：先在当前锚点范围内给新元素补 data-v-owner，再通过共享队列执行 owner 的 ctx.ut()，读取仍为 375px、red 的源值并写入节点。同一轮 flush 会继续处理新入队的渲染后任务，所以本例 await nextTick() 返回时，标记与变量已经完成回填。正确性依赖的是根替换后的这条路径，不需要改变宽度来触发外层更新；两个条件同时存在时也一样。
新增单测使用编译后的稳定插槽，四组在上游实现中均于首次打开因缺少 owner 失败，在补丁版中全部通过。浏览器又用实际 SFC 编译产物确认了三次打开的 computed width 都是 375px，颜色都是红色。结果见首次打开回归摘要弹窗和逐次打开的浏览器记录弹窗；摘要中的错误栈已把本机绝对路径改为仓库相对路径。四组回归代码已随候选补丁提供。
本地 useCssVars.spec.ts 的历史验证为 34/34，相关 runtime 包为 1793 通过、1 跳过；测试范围与日期见候选补丁与回归开销弹窗。
公共弹窗的验证还需要检查真实可见节点的宽度。组件、源码约束和 E2E 分别保护哪些行为，见业务组件的验证方式弹窗。
总结
弹窗变窄的原因，是 Teleport + Transition 内部独立更新后，新建根节点漏掉了 CSS 变量 owner 标记，useCssVars() 因而找不到它。Teleport 改变真实 DOM 位置，却保留组件逻辑归属；scoped 选择器仍然命中，也不等于动态变量已经写入。普通 Teleport + v-if 和 v-show 的对照，帮助把问题缩小到这条更新路径。
应用层把关键几何值通过模板 :style 写到实际节点，可以避开 owner 扫描依赖；保留节点或增加 wrapper 等替代方案，则要接受生命周期或 DOM 结构变化。验证也要从变量是否存在，走到可见弹窗的真实宽度，不能只靠 jsdom 或属性断言。
本地候选补丁尝试在内容组件根 DOM 改变后补 owner，再按同一 owner 合并变量回填，减少无关更新中的重复查询。现有回归、浏览器复测和开销测量支持已测路径，但补丁仍未提交或合并上游，耗时也不包含布局绘制；不能把这些结果当成已发布版本的修复或普遍性能保证。
Teleport 的完整复现与复测
最小复现
下面的 SFC 同时保留三条路径，初始均为关闭。只修改 open，不修改宽度与颜色；关闭 Transition 的 CSS 动画，保留内部组件和默认插槽。把它放进固定使用 Vue 3.5.44 的应用，挂载完成后调用 window.openAll()。
<script setup lang="ts">
import { nextTick, ref } from 'vue'
const openPlain = ref(false)
const openTransition = ref(false)
const openShow = ref(false)
const boxWidth = ref('375px')
const boxColor = ref('rgb(255, 0, 0)')
async function openAll() {
openPlain.value = true
openTransition.value = true
openShow.value = true
await nextTick()
}
Object.assign(window, { openAll })
</script>
<template>
<Teleport to="body">
<div v-if="openPlain" class="repro-box repro-box--plain">plain teleport v-if</div>
</Teleport>
<Teleport to="body">
<Transition :css="false">
<div v-if="openTransition" class="repro-box repro-box--transition">
teleport transition v-if
</div>
</Transition>
</Teleport>
<Teleport to="body">
<div v-show="openShow" class="repro-box repro-box--show">teleport v-show</div>
</Teleport>
</template>
<style scoped>
.repro-box {
width: v-bind(boxWidth);
color: v-bind(boxColor);
border: 1px solid currentcolor;
}
</style>正式版与候选补丁的首次打开对照
浏览器对照把上述三条路径分别独立挂载，分别使用正式 npm production runtime 与本地补丁构建。三个条件相同：初始隐藏，首次只改 open，宽度和颜色保持原值。
| runtime | 普通 Teleport + v-if |
Teleport + Transition + v-if |
Teleport + v-show |
|---|---|---|---|
| 正式版 3.5.44 | 375px、红色 | 928px、继承色，缺 owner 和变量 | 375px、红色 |
| 本地候选补丁 | 375px、红色 | 375px、红色，owner 和变量均存在 | 375px、红色 |
固定视口为 1000 × 640，页面左右各留 36px，失败的块级元素因此铺满 928px。独立挂载也能避免三条路径共享 owner 后，相互回填影响观察。下方的原始记录包含每个可见节点的 computed width、颜色、owner 和 inline style，正文中已展示同一轮截图。
原始记录（JSON）
{
"version": "3.5.44",
"browser": "155.0.8059.85",
"viewport": {
"width": 1000,
"height": 640
},
"method": "Official npm production global runtime versus the previously tested unchanged local patch; initial open=false; width and color never reassigned; Transition CSS disabled.",
"results": [
{
"mode": "if",
"variant": "release",
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"inline": "--repro-boxWidth: 375px; --repro-boxColor: red;"
},
{
"mode": "if",
"variant": "patched",
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"inline": "--repro-boxWidth: 375px; --repro-boxColor: red;"
},
{
"mode": "transition-if",
"variant": "release",
"width": "928px",
"color": "rgb(32, 43, 46)",
"owner": null,
"inline": null
},
{
"mode": "transition-if",
"variant": "patched",
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"inline": "--repro-boxWidth: 375px; --repro-boxColor: red;"
},
{
"mode": "show",
"variant": "release",
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"inline": "--repro-boxWidth: 375px; --repro-boxColor: red;"
},
{
"mode": "show",
"variant": "patched",
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"inline": "--repro-boxWidth: 375px; --repro-boxColor: red;"
}
]
}普通 Teleport + v-if 的对照表明，初始隐藏和 v-if 并不必然让变量丢失。Transition 组合中的内部组件独立更新、随后新建真实根，才会绕开原有 Teleport 调用点；普通 slot 组件独立替换根也能触发同类问题。
初始显示、关闭销毁后再打开，也会产生新根。这个缺陷同样不要求 scoped：普通 style 中的 CSS v-bind 仍然依赖 owner 与变量写入。首次打开与重复打开的四组更严格回归，见正文的 defer / 外层读取 open 一节；那些用例始终不修改宽度与颜色。
候选补丁与回归开销
本地候选补丁改了什么
补丁基于上游 0ff253b；已逐份核对本文涉及的 9 个机制文件，它们与正式 tag v3.5.44 的原始源码一致，下方的文件比对记录保留了两端摘要。运行时代码只改 packages/runtime-core/src/components/Teleport.ts，另在 useCssVars.spec.ts 增加回归测试。它复用已有的 owner 标记和 ctx.ut()，补上内部组件独立更新后漏掉的时机。
文件比对记录（JSON）
{
"version": "3.5.44",
"tarball": "https://registry.npmjs.org/vue/-/vue-3.5.44.tgz",
"integrity": "sha512-dvvmaOCG7lAMkJTPqPwWeGMsPS6DIsFsfZDUgBp9V6mHf9b3+/wyVwYR4Es+WV6uJC0FKRxp81Obcq0ZwUcGFQ==",
"sourceComparisons": [
{
"file": "packages/runtime-core/src/components/Teleport.ts",
"identical": true,
"releaseSha256": "de12ee583a7dfe264fb50dda09098815e986b98052eaa7e375305367884e059a",
"baselineSha256": "de12ee583a7dfe264fb50dda09098815e986b98052eaa7e375305367884e059a"
},
{
"file": "packages/runtime-core/src/components/BaseTransition.ts",
"identical": true,
"releaseSha256": "e5f8a1017437a67bbe027cdfb12c0870bc570322fa4f7f2ec1cb710a67895bcf",
"baselineSha256": "e5f8a1017437a67bbe027cdfb12c0870bc570322fa4f7f2ec1cb710a67895bcf"
},
{
"file": "packages/runtime-dom/src/components/Transition.ts",
"identical": true,
"releaseSha256": "076842a8687cfbd9f01f25a7407d7ccebffddacffdfa293bb2507345b3c73c57",
"baselineSha256": "076842a8687cfbd9f01f25a7407d7ccebffddacffdfa293bb2507345b3c73c57"
},
{
"file": "packages/runtime-dom/src/helpers/useCssVars.ts",
"identical": true,
"releaseSha256": "6cd218da531fbb6450f5100e0ad7ad76b27a4137aceb5d515c53dee7b620d0a2",
"baselineSha256": "6cd218da531fbb6450f5100e0ad7ad76b27a4137aceb5d515c53dee7b620d0a2"
},
{
"file": "packages/runtime-core/src/renderer.ts",
"identical": true,
"releaseSha256": "054523e2d9c2e9c0621fc6f99bc5d7a63962900344fc05effb1b69a159bae5e5",
"baselineSha256": "054523e2d9c2e9c0621fc6f99bc5d7a63962900344fc05effb1b69a159bae5e5"
},
{
"file": "packages/runtime-core/src/componentRenderContext.ts",
"identical": true,
"releaseSha256": "36596888e5e657833a41f4111405a2d8e5cd7327339e33b70c4da8e7d0625986",
"baselineSha256": "36596888e5e657833a41f4111405a2d8e5cd7327339e33b70c4da8e7d0625986"
},
{
"file": "packages/reactivity/src/effect.ts",
"identical": true,
"releaseSha256": "04a96a5ac99f9c36c88f9735a2ed7c24994c28933f8c92213466021ba551b53f",
"baselineSha256": "04a96a5ac99f9c36c88f9735a2ed7c24994c28933f8c92213466021ba551b53f"
},
{
"file": "packages/reactivity/src/dep.ts",
"identical": true,
"releaseSha256": "f728fdeb4b51bd23166730334a08fbe007a9d1205cf2b3340ff01b5938dad271",
"baselineSha256": "f728fdeb4b51bd23166730334a08fbe007a9d1205cf2b3340ff01b5938dad271"
},
{
"file": "packages/compiler-sfc/src/style/cssVars.ts",
"identical": true,
"releaseSha256": "c0840e90515b3184d528fedb9934e29c0e95f1873ba6459b792d698c2fb6c664",
"baselineSha256": "c0840e90515b3184d528fedb9934e29c0e95f1873ba6459b792d698c2fb6c664"
}
]
}把内部组件更新接回 owner 回填
候选补丁利用 Teleport 首次刷新 CSS 变量的时机，为内容根组件登记 onUpdated。内部组件后续独立更新时，再从该钩子安排一次范围刷新，先补 owner，最后由 ctx.ut() 写入变量。
更新钩子比较真实 DOM，避免每次 render 都回填
setCssVarsUpdateHooks() 为每个内容组件保存当前根节点和刷新回调。首次登记时，核心钩子如下；这是候选补丁中的节选：
const state = { update, roots }
cssVarsUpdates.set(instance, state)
onUpdated(() => {
const roots = getCssVarsRoots(instance.subTree)
const prev = state.roots
const changed =
isArray(prev) && isArray(roots)
? prev.length !== roots.length ||
prev.some((node, i) => node !== roots[i])
: prev !== roots
if (changed) {
state.roots = roots
queuePostRenderEffect(state.update, instance.suspense)
}
}, instance)renderer.ts 已经在组件子树 patch 后把 updated 钩子排进渲染后队列，因此这时可以读取更新后的 instance.subTree。onUpdated 的第二个参数显式传入内容组件 instance，把检查挂在真正可能独立更新的实例上。只给外面的 CSS 变量 owner 挂钩子，仍然会漏掉内部更新、外层不更新的场景。
这里比较的是 DOM 节点引用，而不是 VNode 对象。只改文字，也可能生成一个新的 VNode，但原来的 <div> 仍是同一个元素，不需要重新补 owner。v-if 则可能把注释节点换成元素，或者关闭后创建新的元素，这时引用就不同了。
Fragment 有多个根，需要比较列表长度和各位置的节点引用。如果只写 prev !== roots，每次收集出的新数组都会被当成根变化，失去跳过重复工作的作用。根没有变化时，这个新增路径不查询 owner，也不写变量；变量值本身变化，仍由 useCssVars() 原来的响应式更新处理。
查找实际根的函数是：
function getCssVarsRoots(vnode: VNode): RendererNode | RendererNode[] {
while (vnode.component || (__FEATURE_SUSPENSE__ && vnode.suspense)) {
vnode = vnode.component
? vnode.component.subTree
: vnode.suspense!.activeBranch!
}
return vnode.type === Fragment
? (vnode.children as VNode[]).flatMap(getCssVarsRoots)
: vnode.el!
}它沿组件根链和 Suspense 当前分支下钻，展开 Fragment，遇到普通元素就停下来。稳定的元素根已经有变量，其内部新建的后代可以通过 CSS 继承取得变量，不需要观察整棵 DOM 树。钩子的登记也沿这些根结构进行；外层组件本身不更新时，内层根组件的钩子仍然能发现替换。
两个 WeakMap 分别登记组件和变量 owner
同一个内容组件可能多次经过 Teleport 的更新流程。如果每次都调用 onUpdated()，就会累积重复检查。因此 cssVarsUpdates 以内容组件实例为 key，只在第一次登记时注册钩子，后续只更新状态：
if (existing) {
existing.update = update
existing.roots = roots
}existing.update 必须替换成最新回调。回调闭包中持有当前 Teleport VNode 和 isDisabled；target、disabled 或 VNode 变化后，继续使用首次登记的闭包，就可能按旧位置刷新。existing.roots 则同步这次 Teleport 更新后的根节点基线。
另一个 cssVarsOwnerUpdates 以 CSS 变量 owner 为 key。同一 owner 可以声明多个 Teleport，内容组件也不止一个，所以不能把「每个实例只装一个钩子」和「每个 owner 合并一次查询」混成一份登记：
| 登记 | key | 保存的状态 | 避免什么重复 |
|---|---|---|---|
cssVarsUpdates |
内容组件实例 | 最新刷新回调、真实根引用 | 同一组件重复注册钩子 |
cssVarsOwnerUpdates |
CSS 变量 owner | 可复用的变量回填函数 | 同批多个 Teleport 重复扫描同一 owner |
WeakMap 让登记表本身不以强引用持有这些实例。它不能代替回调的卸载检查，也不能单独证明没有内存泄漏；两者解决的是不同问题。
ctx.ut() 增加的是调度分支
原来的 if (ctx && ctx.ut) 保持不变：ctx 是 Teleport VNode 的渲染 owner，ut 由 useCssVars() 安装。只有使用了 CSS 变量的 owner 才进入这条路径，普通 Teleport 不需要安装这套检查。
改动的是 updateCssVars() 的第三个参数和原来的直接调用：
-function updateCssVars(vnode: VNode, isDisabled: boolean) {
+function updateCssVars(vnode: VNode, isDisabled: boolean, deferUpdate = false) {deferUpdate 默认 false，原有挂载、更新和 hydration 调用仍然直接执行 ctx.ut()。只有新增的根变化刷新回调传入 true，进入下面的合并分支：
if (deferUpdate) {
let update = cssVarsOwnerUpdates.get(ctx)
if (!update) {
update = () => {
if (!ctx.isUnmounted) ctx.ut!()
}
cssVarsOwnerUpdates.set(ctx, update)
}
queuePostRenderEffect(update, null)
} else {
ctx.ut()
}假设同一 owner 下的两个 Teleport 都替换了根。第一次刷新只补好第一个范围的标记，如果立刻 ctx.ut()，它就扫描一次这个 owner 的全部节点；第二个范围补完后又扫描一次。数量变成 100 个时，这项重复工作会放大。
合并后的顺序是，各范围先写 owner，再执行共享的变量回填。缓存的是同一个函数对象，不只是相同的函数内容。scheduler.ts 的 post-flush 队列根据任务对象上的 QUEUED 标记去重；如果每次创建一个新箭头函数，就无法把这些请求识别为同一个任务。一轮处理结束后，后续更新仍可再次安排它。
这个 deferUpdate 是内部的 CSS 变量回填选项，与 <Teleport defer> 的延后挂载不是同一件事。
卸载、空内容和 Suspense 的判断各守住一个边界
补标记回调也有一个卸载检查：
const update = () => {
if (!ctx.isUnmounted) updateCssVars(vnode, isDisabled, true)
}入队时 owner 还在，真正执行前，其他组件的更新钩子可能已经把它卸载。因此在准备补标记和最终回填变量这两个执行点都检查 !ctx.isUnmounted，避免继续读取失效 owner 的变量 getter、查询和写入。
这并不假设卸载后 ctx.ut 会变成空；它可能仍然存在，只是这项工作已经不该执行。ctx.ut!() 中的 ! 是 TypeScript 非空断言，运行时会被擦除，没有增加一个判断。外层已经检查过 ctx.ut，延后闭包中用断言表达这项内部约定。
vnode.shapeFlag & ShapeFlags.ARRAY_CHILDREN 则保护 children 遍历。Teleport 有内容时使用数组，但空 Teleport 可以没有 children，不能无条件对它调用 forEach()。
Suspense 涉及的是「节点什么时候已经成为可处理的当前分支」。根变化刷新使用 queuePostRenderEffect(state.update, instance.suspense)；存在 pending 分支时，回调会由该边界暂存，等待解析。首次登记遇到 pending Suspense，也需要安排刷新，因为异步分支首次激活不等于一个已有组件执行 updated 钩子。刷新后再为当前根结构补齐登记。
最终 owner 共享的变量回填使用 queuePostRenderEffect(update, null)：各范围的刷新已经处理了自己的 Suspense 时机，共享任务不绑定到其中某一个边界。整个方案使用已有的生命周期和渲染后队列，没有给 body 增加 MutationObserver。
回归测试按 CSS 变量契约组织
运行时代码改在 Teleport.ts，测试放在 packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts，是因为要保护的行为跨了两个模块：Teleport 给新节点补 owner，useCssVars() 根据 owner 找到它，再把变量写进 HTMLElement.style。
上游的 useCssVars.spec.ts 本来就包含 with teleport、with teleport in child slot、with teleport(change subTree) 和 with teleport(disabled)。新增 Transition、条件 slot、根替换和 Suspense 用例，是补齐同一组行为的缺口。
这个测试文件使用 @vue/runtime-dom 的 renderer，实际执行 runtime-core 中的 Teleport。新增断言同时看标记和最终变量，不只检查某个内部回调有没有被调用：
expect(modal).not.toBeNull()
expect(modal).not.toBe(previous)
expect(modal.getAttribute('data-v-owner')).toBe(ownerId)
expect(modal.style.getPropertyValue('--width')).toBe('375px')
expect(modal.style.getPropertyValue('--color')).toBe('red')
expect(updated).toHaveBeenCalledTimes(ownerReadsOpen ? 1 : 0)ownerId 是 setup 中保存的组件 uid 字符串，previous 是上次关闭时移除的元素，updated 记录外层组件的 onUpdated。除了精确比较 owner 和变量，测试还确认每次打开是新的 DOM；外层不读取 open 时没有更新，读取时有一次更新。宽度和颜色的源值从未重新赋值。
如果只 mock 一个 ctx.ut，断言它调用过，owner 范围写错或变量根本没落到目标元素上时，测试仍可能通过。这里直接调用 useCssVars()，省略 SFC CSS 编译步骤，但保留 CSS 变量运行时的配合。新增四组的模板则实际经过 compiler-dom.compile()，再把产出的 render 交给 runtime-dom 执行，保留编译器的稳定插槽与优化更新路径。普通手写 h() 可能改变子组件在父级 patch 中是否同步更新，不能替代这组时序回归。
用例里的 Transition 设置 css: false，只关闭浏览器 CSS 过渡效果；组件、插槽和子树更新路径仍然存在。每次只改变 open，在一次 await nextTick() 后检查变量，不先修改颜色或宽度触发另一轮更新。
packages/runtime-core/__tests__/components/Teleport.spec.ts 主要覆盖挂载、移动、锚点、target、disabled 和 defer 等 Teleport 渲染行为。它自身也有 jsdom 和 DOM renderer 用例，因此不是不能放 CSS 变量测试；这次沿用已有 useCssVars 分类，能让相关契约集中在一起。测试目录不要求和被修改的源码文件一一对应。
初始隐藏后插入、初始显示后重建、slot、多层组件根、Fragment、disabled 和 target 切换、空 Teleport、Suspense 解析都补了回归覆盖。useCssVars.spec.ts 相比上游的 17 个用例，现已增至 34 个；其中新增的四组编译模板用例覆盖 defer 与外层读取 open 的全部组合。
2026-10-27 的验证结果是该文件 34/34 通过；相关的 runtime-core、runtime-dom、server-renderer 共 77 个测试文件，1793 通过、1 跳过；TypeScript、改动文件的 ESLint 和格式检查通过。仅加载上游 Teleport 源码的对照中，四个新用例都在首次打开时因 owner 缺失失败，其余 30 个用例在这次定向对照中跳过。
2026-10-24 曾执行全量单测，记录为 3922 通过、5 跳过，并通过当时的类型、Lint、格式和浏览器构建检查。它与 2026-10-27 三个 runtime 相关包的复跑范围不同。后一次只增加测试，运行时源码与下节性能测量所用实现相同。
单测确认变量有没有写进去，真实宽度还需要浏览器检查。jsdom 不提供真实布局计算，所以前面的浏览器复测负责确认 computed width 为 375px、颜色正确，并在反复关闭重开后继续成立。已测路径通过，也不等于候选补丁已经获得上游审查。
更新钩子的开销
最初直接在每次组件更新后回填，功能能通过，重复扫描却很明显：同一 owner 下 100 个 Teleport 连续更新 10 轮，即使只改文字，也产生了 1000 次 owner 查询和 100000 次 CSS 变量写入。因此补丁增加了真实根节点比较和同 owner 的队列去重。
| 同一 owner、100 个 Teleport、10 轮更新 | 最初实现 | 当前候选补丁 |
|---|---|---|
| 只改文字，DOM 根不变 | 1000 次查询、100000 次变量写入 | 0 次查询、0 次变量写入 |
| 每轮都替换全部根节点 | 1000 次查询 | 10 次查询，每轮合并为一次 |
根不变仍然有钩子调用和根引用比较，Fragment 还要收集根节点列表，不能说没有开销。为减少不同构建带来的干扰，耗时测量在同一 production bundle、同一页面和应用中，交替启用、停用新增钩子，只测根不变的文字更新。每组预热两轮，取 11 组成对样本的中位数：
| 更新规模 | 累计更新轮数 | 停用钩子 | 启用钩子 | 按中位数差值折算每轮增加 |
|---|---|---|---|---|
| 1 个组件、1 个 Teleport | 200000 | 114.6ms | 150.6ms | 约 0.18μs |
| 100 个组件、100 个 Teleport | 4000 | 168.7ms | 203.7ms | 约 8.75μs / 100 个组件 |
环境是 Windows、i5-14600K、Chromium 151.0.7922.34。计时覆盖同步修改到 await nextTick() 完成，不包含布局和绘制；停用私有实例上的钩子只是实验对照，不能作为应用层方案，也不能用于比较根替换后的正确行为。整包对照里还有与补丁无关的耗时波动，因此没有把那些变快的样本算成优化收益。
同一生产构建的 global bundle，gzip 从 62907 字节增至 63179 字节，增加 272 字节。反复挂载、卸载和强制 GC 后，候选补丁与基线保留堆的差距约 140KB，在 100 到 600 轮间没有持续扩大；这只反映该用例的保留堆，不能代替峰值分配或一般性的内存泄漏检查。
完整方法、原始样本、查询与写入计数见下方的测量数据；对应源码和测试见基于 0ff253b、含 2026-10-27 回归测试的候选补丁。它目前仍是本地验证结果，不能据此认为升级已发布版本就会获得这项修复。
测量数据（JSON）
{
"date": "2026-10-24",
"base": "0ff253bfba3ee8d3d65448bd44ad890fd01b0ecd",
"vue": "3.5.44",
"sourceSha256": "90733f857678500ce45ca882f24ecf4bbf53cc3b2a83f57d869af9519ac21aab",
"validation": {
"unitPassed": 3922,
"unitSkipped": 5,
"eslint": "passed",
"typecheck": "passed",
"formatting": "passed",
"globalBuild": "passed",
"reviewCases": "both failed on upstream; both passed on initial and current patches"
},
"notes": [
"Primary hook overhead estimate uses same-bundle, same-page isolation on stable DOM roots. Disabling private instance.u hooks is a benchmark control, not an application workaround or a valid fix for root replacement.",
"Whole-bundle comparisons include some speedups in paths without added hooks. These differences cannot be attributed to this fix and are not claimed as performance improvements.",
"Initial 3-variant timing samples are short and were collected before explicit tab foregrounding; their deterministic query/write counts are used to identify redundant work. Use the focused samples and isolation data for timing interpretation.",
"Upstream root-replacement timings do less work because CSS variables are missing; do not treat them as a functionally equivalent performance target.",
"Timing excludes forced layout, paint, and screenshot overhead. This is one Windows desktop and one Chromium version, not a cross-device guarantee.",
"GC measurements describe retained heap after unmount, not peak allocation and not a general proof of no memory leaks."
],
"reviewCases": [
{
"comment": "https://github.com/vuejs/core/pull/7344#issuecomment-1351284795",
"author": "moushicheng",
"date": "2022-12-14T12:41:17Z",
"url": "https://deploy-preview-7344--vue-sfc-playground.netlify.app/#eNqlVM1um0AQfpXpXpxIXjg0UiXXsdpDr+2huVTigmGwt4Xd1e4ARZbfvbNAMYlRoiQXpJmd72e+1XISX62NmhrFRmwJK1umhLtEA2z3NZHR8CUrVfbnPhH+aNqHo9IHuIcPU5GI3YM5HEoECuU2HmAjhYt3/SdUfSdXDWRl6j0TEv4lhoc+gDZALtVekTJ63ZdYojWOelzMwAvLZXJEL/BCI1Uxtz1JAfz69vOR2vcfj9Tmetv4iViiE+KkhmkgwxJ7k3cT+1usYBnIBh+T2oKTUXUK4kUvV0G92t91WKPjWVpzlwuJXRt/OcGL3YUV3rDE82uAhFbREZjIpRC4W5dai26mONtwYcdnLyo0ppfFpc+csgQeqbbcUVXv4QQOCzhD4UwFK36SqwGdGe0JMlMaxy+PZ25WDvPV7f+T+bsMp+RqvP0cVAedUZO6MshHIS04BeqecsO57ZXOb/oq4M49tB8XazGYk1Vqo9/eaP5N9NhkPPCJ2AxsocemQ52II5H1mzjO0Zamk9Zho7CVnz7e3UnJU9IXmeREuoMztc4jjVSqoos49JiPI1drUhVG6Cu5d6b16Fg+EeuZUszNBp10qHN0fFfvVn5CeKUexDmdszj/A/IsvhM="
},
{
"comment": "https://github.com/vuejs/core/pull/7344#issuecomment-1354367044",
"author": "edison1105",
"date": "2022-12-16T08:16:10Z",
"url": "https://deploy-preview-7344--vue-sfc-playground.netlify.app/#__DEV__eNqlkU1u2zAQha8y5cYJYEqLBijgOka76AmaTQFuZGlks6FIYjiSIxi+e4aS4hjJMloIePPzvtHTWf2OsRh6VBu1Zeyiqxh3xgNs9z1z8PCrdrZ+fjQqHcPp6Wj9AR7h21UYtXsKh4ND4Cy35by2WFC5m15ZGW9YEA5jIAYOYrkPzSgGuSvTTJVPlu2yPdUaO0DtqpRkmvGFjYJB2/b2nKtBfv79+QvvPutZL8yraSmub9DyA1UKy/hydC5cYxGZarKRISH3USq2mz7nDIQtXKCl0MFK8lzN23XwiaEOLpDEJjN3K8Jmdf/WuQ01d9vKJbz/mbEzaIHy6DK/yBnAOXtPnhtJY299czepvHeZVqdxtVbzdbqrYvE/BS8/edo1SyMZtZndck2uztqoI3NMm7JsMLow6kg4WDzpH98fHrSWKZ3aWksk44FC75vCIzvbjkUVYyntgnrPtsMCU6f3FE4JSfBGrW9IpRQHJE3oGySkr5M/GH6iZ7ikc1GXV60oBH0="
}
],
"sizes": {
"upstream": {
"bytes": 173088,
"gzip": 62907,
"brotli": 55853,
"sha256": "f92677225c1838500915468e4a9d29f2dbaa195428747dc17b49f6a01411679b"
},
"hooks-v1": {
"bytes": 173445,
"gzip": 63027,
"brotli": 55962,
"sha256": "92e1123e1988260357b4fe50d07fc34d9fbad49881749acd3c9568d023748044"
},
"current": {
"bytes": 173884,
"gzip": 63179,
"brotli": 56108,
"sha256": "045a4019fd60fe97053e2f87792cc8da9cf8f5f8d7d1485b9e897305da6008bf"
}
},
"initialDiagnosticsAndSamples": {
"environment": {
"cpu": "Intel(R) Core(TM) i5-14600K",
"node": "v24.22.1",
"platform": "win32",
"cores": 20,
"browser": "151.0.7922.34",
"head": "0ff253bfba3ee8d3d65448bd44ad890fd01b0ecd"
},
"method": {
"rounds": 9,
"warmups": 2,
"timing": "synchronous mutation + await Vue.nextTick for every iteration; excludes paint and forced layout",
"order": "alternating variants",
"production": true,
"diagnostics": "separate instrumented 10-iteration pass; timings are not instrumented"
},
"results": [
{
"config": {
"name": "no-css-text-100",
"css": false,
"teleports": 100,
"roots": 1,
"ticks": 200
},
"samples": {
"upstream": [
14.100000023841858,
11.700000047683716,
10.899999976158142,
11.200000047683716,
11.700000047683716,
12.700000047683716,
13.799999952316284,
11.300000071525574,
10.399999976158142
],
"hooks-v1": [
13.200000047683716,
11.299999952316284,
10.5,
11.799999952316284,
11.100000023841858,
16,
13,
13.100000023841858,
11
],
"current": [
15,
10.399999976158142,
10.799999952316284,
9.799999952316284,
12.199999928474426,
13.200000047683716,
17.5,
13,
10.200000047683716
]
},
"diagnostics": {
"upstream": {
"elapsed": 0.5,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 100,
"varsCorrect": false,
"hookCounts": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
},
"hooks-v1": {
"elapsed": 0.5,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 100,
"varsCorrect": false,
"hookCounts": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
},
"current": {
"elapsed": 0.6999999284744263,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 100,
"varsCorrect": false,
"hookCounts": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
}
}
},
{
"config": {
"name": "css-text-1",
"css": true,
"teleports": 1,
"roots": 1,
"ticks": 2000
},
"samples": {
"upstream": [
4.700000047683716,
1.8000000715255737,
1.7999999523162842,
1.600000023841858,
2,
1.600000023841858,
2.100000023841858,
1.5999999046325684,
1.600000023841858
],
"hooks-v1": [
9.5,
6,
6.100000023841858,
5.600000023841858,
5.100000023841858,
5,
4.699999928474426,
4.899999976158142,
5.100000023841858
],
"current": [
5.5,
2.100000023841858,
2.200000047683716,
1.899999976158142,
2.100000023841858,
1.899999976158142,
2.100000023841858,
2.1999999284744263,
2.399999976158142
]
},
"diagnostics": {
"upstream": {
"elapsed": 0,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 1,
"varsCorrect": true,
"hookCounts": [
0
]
},
"hooks-v1": {
"elapsed": 0.3999999761581421,
"counts": {
"queries": 10,
"owners": 10,
"cssWrites": 10
},
"nodes": 1,
"varsCorrect": true,
"hookCounts": [
1
]
},
"current": {
"elapsed": 0,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 1,
"varsCorrect": true,
"hookCounts": [
1
]
}
}
},
{
"config": {
"name": "css-text-100-roots",
"css": true,
"teleports": 1,
"roots": 100,
"ticks": 200
},
"samples": {
"upstream": [
12.899999976158142,
11.100000023841858,
10.600000023841858,
10.899999976158142,
9.699999928474426,
12,
9.200000047683716,
12.200000047683716,
15
],
"hooks-v1": [
27.5,
21.90000009536743,
23.299999952316284,
21.699999928474426,
129.5,
21.699999928474426,
20.90000009536743,
24.600000023841858,
21.5
],
"current": [
15.100000023841858,
11.899999976158142,
11.399999976158142,
12.5,
13.100000023841858,
12.5,
11.600000023841858,
11.899999976158142,
11.900000095367432
]
},
"diagnostics": {
"upstream": {
"elapsed": 0.6000000238418579,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 100,
"varsCorrect": true,
"hookCounts": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
},
"hooks-v1": {
"elapsed": 1.600000023841858,
"counts": {
"queries": 10,
"owners": 1000,
"cssWrites": 1000
},
"nodes": 100,
"varsCorrect": true,
"hookCounts": [
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1
]
},
"current": {
"elapsed": 0.5999999046325684,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 100,
"varsCorrect": true,
"hookCounts": [
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1
]
}
}
},
{
"config": {
"name": "css-text-100-teleports",
"css": true,
"teleports": 100,
"roots": 1,
"ticks": 100
},
"samples": {
"upstream": [
7.900000095367432,
6.5,
6.199999928474426,
5.600000023841858,
4.799999952316284,
5,
4.899999976158142,
5.200000047683716,
5
],
"hooks-v1": [
516,
430.7000000476837,
441.2000000476837,
409.89999997615814,
414.59999990463257,
430.7999999523163,
445,
446.6999999284744,
406.39999997615814
],
"current": [
10.199999928474426,
8.399999976158142,
7.799999952316284,
7.100000023841858,
6,
5.700000047683716,
5.800000071525574,
9.300000071525574,
5.5
]
},
"diagnostics": {
"upstream": {
"elapsed": 1,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 100,
"varsCorrect": true,
"hookCounts": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
},
"hooks-v1": {
"elapsed": 56.89999997615814,
"counts": {
"queries": 1000,
"owners": 1000,
"cssWrites": 100000
},
"nodes": 100,
"varsCorrect": true,
"hookCounts": [
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1
]
},
"current": {
"elapsed": 1.100000023841858,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 100,
"varsCorrect": true,
"hookCounts": [
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1
]
}
}
},
{
"config": {
"name": "css-text-100-teleports-large-page",
"css": true,
"teleports": 100,
"roots": 1,
"ticks": 100,
"background": 5000
},
"samples": {
"upstream": [
7.300000071525574,
6,
5.399999976158142,
8.199999928474426,
9,
5,
5.600000023841858,
5.199999928474426,
5.399999976158142
],
"hooks-v1": [
428.8000000715256,
431.7000000476837,
418.5,
402.5,
436.60000002384186,
416.5,
430.7000000476837,
410.2000000476837,
409.5
],
"current": [
9.5,
6.699999928474426,
6.300000071525574,
7,
5.800000071525574,
5.799999952316284,
5.299999952316284,
5.299999952316284,
7.100000023841858
]
},
"diagnostics": {
"upstream": {
"elapsed": 0.6999999284744263,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 100,
"varsCorrect": true,
"hookCounts": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
},
"hooks-v1": {
"elapsed": 53.5,
"counts": {
"queries": 1000,
"owners": 1000,
"cssWrites": 100000
},
"nodes": 100,
"varsCorrect": true,
"hookCounts": [
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1
]
},
"current": {
"elapsed": 0.7000000476837158,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 100,
"varsCorrect": true,
"hookCounts": [
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1
]
}
}
},
{
"config": {
"name": "css-replace-100-teleports",
"css": true,
"teleports": 100,
"roots": 1,
"ticks": 40,
"replace": true
},
"samples": {
"upstream": [
4.600000023841858,
4.5,
5.399999976158142,
3.399999976158142,
4.100000023841858,
3.700000047683716,
3.299999952316284,
3.5,
4.599999904632568
],
"hooks-v1": [
89.20000004768372,
88.29999995231628,
83.79999995231628,
109.10000002384186,
94.29999995231628,
100.30000007152557,
93.79999995231628,
88.39999997615814,
83.20000004768372
],
"current": [
9.699999928474426,
9.5,
11.100000023841858,
8.600000023841858,
10.900000095367432,
8.099999904632568,
7.200000047683716,
7.799999952316284,
7.100000023841858
]
},
"diagnostics": {
"upstream": {
"elapsed": 1.4000000953674316,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 100,
"varsCorrect": false,
"hookCounts": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
},
"hooks-v1": {
"elapsed": 25.100000023841858,
"counts": {
"queries": 1000,
"owners": 1000,
"cssWrites": 50500
},
"nodes": 100,
"varsCorrect": true,
"hookCounts": [
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1
]
},
"current": {
"elapsed": 2.5,
"counts": {
"queries": 10,
"owners": 1000,
"cssWrites": 1000
},
"nodes": 100,
"varsCorrect": true,
"hookCounts": [
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1
]
}
}
},
{
"config": {
"name": "css-fragment-replace",
"css": true,
"teleports": 1,
"roots": 1,
"fragment": 100,
"ticks": 100,
"replace": true
},
"samples": {
"upstream": [
11.100000023841858,
10,
9.5,
10.300000071525574,
10.100000023841858,
11.5,
12.5,
9.099999904632568,
10.299999952316284
],
"hooks-v1": [
19.600000023841858,
19,
18.100000023841858,
17.699999928474426,
42.10000002384186,
21.200000047683716,
19.90000009536743,
15.5,
17.200000047683716
],
"current": [
20.199999928474426,
19.200000047683716,
17.200000047683716,
19.299999952316284,
19.5,
21.799999952316284,
17.100000023841858,
19.700000047683716,
18.800000071525574
]
},
"diagnostics": {
"upstream": {
"elapsed": 1.2000000476837158,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 100,
"varsCorrect": false,
"hookCounts": [
0
]
},
"hooks-v1": {
"elapsed": 2.3000000715255737,
"counts": {
"queries": 10,
"owners": 1000,
"cssWrites": 1000
},
"nodes": 100,
"varsCorrect": true,
"hookCounts": [
1
]
},
"current": {
"elapsed": 2.100000023841858,
"counts": {
"queries": 10,
"owners": 1000,
"cssWrites": 1000
},
"nodes": 100,
"varsCorrect": true,
"hookCounts": [
1
]
}
}
},
{
"config": {
"name": "css-unrelated-body-mutations",
"css": true,
"teleports": 100,
"roots": 1,
"ticks": 100,
"unrelated": true
},
"samples": {
"upstream": [
0.3999999761581421,
0,
0.10000002384185791,
0,
0.09999990463256836,
0,
0.10000002384185791,
0.10000002384185791,
0.10000002384185791
],
"hooks-v1": [
0.10000002384185791,
0.10000002384185791,
0,
0,
0,
0,
0,
0.19999992847442627,
0.10000002384185791
],
"current": [
0,
0,
0,
0.10000002384185791,
0,
0,
0,
0,
0
]
},
"diagnostics": {
"upstream": {
"elapsed": 0,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 100,
"varsCorrect": true,
"hookCounts": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
},
"hooks-v1": {
"elapsed": 0,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 100,
"varsCorrect": true,
"hookCounts": [
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1
]
},
"current": {
"elapsed": 0.10000002384185791,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 100,
"varsCorrect": true,
"hookCounts": [
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1
]
}
}
}
]
},
"focusedWholeBundleComparison": {
"environment": {
"cpu": "Intel(R) Core(TM) i5-14600K",
"node": "v24.22.1",
"platform": "win32",
"cores": 20,
"browser": "151.0.7922.34",
"head": "0ff253bfba3ee8d3d65448bd44ad890fd01b0ecd"
},
"method": {
"rounds": 9,
"warmups": 2,
"timing": "synchronous mutation + await Vue.nextTick for every iteration; excludes paint and forced layout",
"order": "alternating variants; measured tab brought to foreground for each sample",
"production": true,
"diagnostics": "separate instrumented 10-iteration pass; timings are not instrumented"
},
"results": [
{
"config": {
"name": "no-css-text-100",
"css": false,
"teleports": 100,
"roots": 1,
"ticks": 4000
},
"samples": {
"upstream": [
249.5,
210.79999995231628,
218.60000002384186,
344.40000009536743,
352.1999999284744,
364.89999997615814,
351,
374.3000000715256,
334.5
],
"current": [
205.39999997615814,
218.20000004768372,
246.20000004768372,
197.5,
224.89999997615814,
376.6999999284744,
361.1999999284744,
364.39999997615814,
350.10000002384186
]
},
"diagnostics": {
"upstream": {
"elapsed": 1.600000023841858,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 100,
"varsCorrect": false,
"hookCounts": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
},
"current": {
"elapsed": 0.8999999761581421,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 100,
"varsCorrect": false,
"hookCounts": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
}
}
},
{
"config": {
"name": "css-text-1",
"css": true,
"teleports": 1,
"roots": 1,
"ticks": 40000
},
"samples": {
"upstream": [
30.200000047683716,
26.399999976158142,
28.399999976158142,
29.299999952316284,
27.799999952316284,
26.600000023841858,
28,
25.799999952316284,
26
],
"current": [
36.5,
35.39999997615814,
35.89999997615814,
37.700000047683716,
32.10000002384186,
36.5,
31.600000023841858,
32.60000002384186,
34.799999952316284
]
},
"diagnostics": {
"upstream": {
"elapsed": 0.09999990463256836,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 1,
"varsCorrect": true,
"hookCounts": [
0
]
},
"current": {
"elapsed": 0,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 1,
"varsCorrect": true,
"hookCounts": [
1
]
}
}
},
{
"config": {
"name": "css-text-100-roots",
"css": true,
"teleports": 1,
"roots": 100,
"ticks": 4000
},
"samples": {
"upstream": [
212.29999995231628,
234.09999990463257,
206,
200,
327.10000002384186,
358.2000000476837,
330.7999999523163,
355.7000000476837,
336.7000000476837
],
"current": [
221.20000004768372,
221.70000004768372,
234.29999995231628,
245.90000009536743,
227.39999997615814,
415.5,
428.6999999284744,
419.5,
427.8000000715256
]
},
"diagnostics": {
"upstream": {
"elapsed": 1.8000000715255737,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 100,
"varsCorrect": true,
"hookCounts": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
},
"current": {
"elapsed": 2.100000023841858,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 100,
"varsCorrect": true,
"hookCounts": [
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1
]
}
}
},
{
"config": {
"name": "css-text-100-teleports",
"css": true,
"teleports": 100,
"roots": 1,
"ticks": 2000
},
"samples": {
"upstream": [
106.79999995231628,
118.20000004768372,
100.70000004768372,
117.60000002384186,
103,
99.09999990463257,
102.5,
99.79999995231628,
98
],
"current": [
111.69999992847443,
115.10000002384186,
121.70000004768372,
115.79999995231628,
141.5,
113.60000002384186,
125.5,
108.39999997615814,
111.10000002384186
]
},
"diagnostics": {
"upstream": {
"elapsed": 0.40000009536743164,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 100,
"varsCorrect": true,
"hookCounts": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
},
"current": {
"elapsed": 0.6000000238418579,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 100,
"varsCorrect": true,
"hookCounts": [
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1
]
}
}
},
{
"config": {
"name": "css-text-100-teleports-large-page",
"css": true,
"teleports": 100,
"roots": 1,
"ticks": 2000,
"background": 5000
},
"samples": {
"upstream": [
160.20000004768372,
114.20000004768372,
95.79999995231628,
108.29999995231628,
128.5,
104.90000009536743,
110.89999997615814,
95.29999995231628,
100.70000004768372
],
"current": [
127.90000009536743,
122.20000004768372,
110.5,
112.10000002384186,
129.80000007152557,
109.89999997615814,
119.39999997615814,
129.70000004768372,
109.19999992847443
]
},
"diagnostics": {
"upstream": {
"elapsed": 0.5,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 100,
"varsCorrect": true,
"hookCounts": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
},
"current": {
"elapsed": 0.6000000238418579,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 100,
"varsCorrect": true,
"hookCounts": [
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1
]
}
}
},
{
"config": {
"name": "css-replace-100-teleports",
"css": true,
"teleports": 100,
"roots": 1,
"ticks": 800,
"replace": true
},
"samples": {
"upstream": [
72.79999995231628,
90.5,
81.40000009536743,
84.60000002384186,
71.30000007152557,
83.89999997615814,
69.69999992847443,
68.60000002384186,
87.80000007152557
],
"current": [
144.5,
151.89999997615814,
159.20000004768372,
143.40000009536743,
144.79999995231628,
144.90000009536743,
163.29999995231628,
153.39999997615814,
139.39999997615814
]
},
"diagnostics": {
"upstream": {
"elapsed": 1.2000000476837158,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 100,
"varsCorrect": false,
"hookCounts": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
},
"current": {
"elapsed": 2.600000023841858,
"counts": {
"queries": 10,
"owners": 1000,
"cssWrites": 1000
},
"nodes": 100,
"varsCorrect": true,
"hookCounts": [
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1
]
}
}
},
{
"config": {
"name": "css-fragment-replace",
"css": true,
"teleports": 1,
"roots": 1,
"fragment": 100,
"ticks": 2000,
"replace": true
},
"samples": {
"upstream": [
204.29999995231628,
186.89999997615814,
194.10000002384186,
361.7000000476837,
370.5,
365.10000002384186,
371.7000000476837,
353.5,
369.2000000476837
],
"current": [
348.2999999523163,
315.7000000476837,
327.2999999523163,
320.60000002384186,
624.5,
642,
623.1000000238419,
633.6999999284744,
620.7999999523163
]
},
"diagnostics": {
"upstream": {
"elapsed": 2.799999952316284,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 100,
"varsCorrect": false,
"hookCounts": [
0
]
},
"current": {
"elapsed": 5.600000023841858,
"counts": {
"queries": 10,
"owners": 1000,
"cssWrites": 1000
},
"nodes": 100,
"varsCorrect": true,
"hookCounts": [
1
]
}
}
},
{
"config": {
"name": "css-unrelated-body-mutations",
"css": true,
"teleports": 100,
"roots": 1,
"ticks": 2000,
"unrelated": true
},
"samples": {
"upstream": [
2.299999952316284,
1.100000023841858,
1.6999999284744263,
1.0999999046325684,
0.8000000715255737,
0.7999999523162842,
0.7999999523162842,
1.600000023841858,
0.6000000238418579
],
"current": [
0.8999999761581421,
1.100000023841858,
0.7999999523162842,
0.8999999761581421,
0.8000000715255737,
1,
0.7000000476837158,
0.7000000476837158,
0.7000000476837158
]
},
"diagnostics": {
"upstream": {
"elapsed": 0,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 100,
"varsCorrect": true,
"hookCounts": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
]
},
"current": {
"elapsed": 0,
"counts": {
"queries": 0,
"owners": 0,
"cssWrites": 0
},
"nodes": 100,
"varsCorrect": true,
"hookCounts": [
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1,
1
]
}
}
}
]
},
"hookIsolation": {
"method": "same production bundle, same page and app; only injected instance.u hooks are enabled/disabled between stable-root text samples; constant-length alternating text, 2 warmups, 11 alternating pairs; no paint/layout; disabling hooks is an experiment, not a usable fix for root replacement",
"browser": "151.0.7922.34",
"results": [
{
"config": {
"name": "one-component",
"teleports": 1,
"roots": 1,
"ticks": 200000
},
"samples": {
"disabled": [
112.5,
114.60000002384186,
118.60000002384186,
119.40000009536743,
118.69999992847443,
111.39999997615814,
112.5,
109.10000002384186,
133.39999997615814,
106.5,
118.40000009536743
],
"enabled": [
146.89999997615814,
146.60000002384186,
170.10000002384186,
150.89999997615814,
150.60000002384186,
172.39999997615814,
148.39999997615814,
162.60000002384186,
147.5,
144.69999992847443,
192.19999992847443
]
},
"medians": {
"disabled": 114.60000002384186,
"enabled": 150.60000002384186
},
"addedMicrosecondsPerBatch": 0.18
},
{
"config": {
"name": "100-teleports",
"teleports": 100,
"roots": 1,
"ticks": 4000
},
"samples": {
"disabled": [
167.59999990463257,
166.29999995231628,
170.30000007152557,
167.30000007152557,
172.5,
176.5,
166.29999995231628,
164.70000004768372,
181.79999995231628,
168.70000004768372,
173.89999997615814
],
"enabled": [
203.70000004768372,
205.79999995231628,
205.90000009536743,
194,
197.60000002384186,
208.59999990463257,
205.09999990463257,
206.39999997615814,
198.5,
194.39999997615814,
194.90000009536743
]
},
"medians": {
"disabled": 168.70000004768372,
"enabled": 203.70000004768372
},
"addedMicrosecondsPerBatch": 8.75
},
{
"config": {
"name": "100-sibling-roots",
"teleports": 1,
"roots": 100,
"ticks": 4000
},
"samples": {
"disabled": [
177.29999995231628,
170.69999992847443,
172.39999997615814,
179.70000004768372,
173.89999997615814,
177,
171,
177,
179.70000004768372,
172.10000002384186,
165.80000007152557
],
"enabled": [
210.29999995231628,
215.60000002384186,
200.39999997615814,
214.39999997615814,
202.60000002384186,
196.70000004768372,
199.89999997615814,
205.70000004768372,
250.30000007152557,
202.39999997615814,
199.79999995231628
]
},
"medians": {
"disabled": 173.89999997615814,
"enabled": 202.60000002384186
},
"addedMicrosecondsPerBatch": 7.175000011920929
},
{
"config": {
"name": "100-fragment-roots",
"teleports": 1,
"roots": 1,
"fragment": 100,
"ticks": 4000
},
"samples": {
"disabled": [
133.89999997615814,
137.80000007152557,
154.60000002384186,
129.79999995231628,
133.70000004768372,
140.60000002384186,
140.10000002384186,
134.19999992847443,
130.39999997615814,
138.60000002384186,
145.10000002384186
],
"enabled": [
142.20000004768372,
137.59999990463257,
139.89999997615814,
136.5,
138.59999990463257,
139.10000002384186,
137.69999992847443,
142.89999997615814,
139.60000002384186,
137.29999995231628,
141.80000007152557
]
},
"medians": {
"disabled": 137.80000007152557,
"enabled": 139.10000002384186
},
"addedMicrosecondsPerBatch": 0.32499998807907104
}
]
},
"retainedHeap": {
"method": "100 components under one CSS-vars Teleport per mount/unmount; 100 warmup cycles, then 5 batches of 100; two explicit GC requests before each CDP Runtime.getHeapUsage reading; retained heap only, not peak allocation or a general proof of no leaks",
"results": [
{
"variant": "upstream",
"heaps": [
{
"cycles": 100,
"usedSize": 1847848,
"totalSize": 2813952,
"embedderHeapUsedSize": 347328,
"backingStorageSize": 173441
},
{
"cycles": 200,
"usedSize": 1865592,
"totalSize": 2551808,
"embedderHeapUsedSize": 386728,
"backingStorageSize": 173441
},
{
"cycles": 300,
"usedSize": 1867348,
"totalSize": 2813952,
"embedderHeapUsedSize": 414080,
"backingStorageSize": 173441
},
{
"cycles": 400,
"usedSize": 1882356,
"totalSize": 2551808,
"embedderHeapUsedSize": 414240,
"backingStorageSize": 173441
},
{
"cycles": 500,
"usedSize": 1884816,
"totalSize": 2813952,
"embedderHeapUsedSize": 414392,
"backingStorageSize": 173441
},
{
"cycles": 600,
"usedSize": 1906560,
"totalSize": 2813952,
"embedderHeapUsedSize": 414552,
"backingStorageSize": 173441
}
]
},
{
"variant": "hooks-v1",
"heaps": [
{
"cycles": 100,
"usedSize": 1984148,
"totalSize": 2686976,
"embedderHeapUsedSize": 347176,
"backingStorageSize": 173798
},
{
"cycles": 200,
"usedSize": 2000156,
"totalSize": 2949120,
"embedderHeapUsedSize": 386576,
"backingStorageSize": 173798
},
{
"cycles": 300,
"usedSize": 2002040,
"totalSize": 2686976,
"embedderHeapUsedSize": 413928,
"backingStorageSize": 173798
},
{
"cycles": 400,
"usedSize": 2017520,
"totalSize": 2949120,
"embedderHeapUsedSize": 414080,
"backingStorageSize": 173798
},
{
"cycles": 500,
"usedSize": 2020908,
"totalSize": 2949120,
"embedderHeapUsedSize": 414240,
"backingStorageSize": 173798
},
{
"cycles": 600,
"usedSize": 2041196,
"totalSize": 2949120,
"embedderHeapUsedSize": 414392,
"backingStorageSize": 173798
}
]
},
{
"variant": "current",
"heaps": [
{
"cycles": 100,
"usedSize": 1989036,
"totalSize": 2686976,
"embedderHeapUsedSize": 347176,
"backingStorageSize": 174236
},
{
"cycles": 200,
"usedSize": 2004288,
"totalSize": 2686976,
"embedderHeapUsedSize": 386576,
"backingStorageSize": 174236
},
{
"cycles": 300,
"usedSize": 2007428,
"totalSize": 2686976,
"embedderHeapUsedSize": 413928,
"backingStorageSize": 174236
},
{
"cycles": 400,
"usedSize": 2022240,
"totalSize": 2949120,
"embedderHeapUsedSize": 414080,
"backingStorageSize": 174236
},
{
"cycles": 500,
"usedSize": 2025172,
"totalSize": 2949120,
"embedderHeapUsedSize": 414240,
"backingStorageSize": 174236
},
{
"cycles": 600,
"usedSize": 2045856,
"totalSize": 2949120,
"embedderHeapUsedSize": 414392,
"backingStorageSize": 174236
}
]
}
]
}
}业务弹窗的结构与尺寸绑定
<ClientOnly>
<Teleport to="body">
<Transition>
<div v-if="open || keepMounted" v-show="open" class="common-modal">
<div class="common-modal__dialog">
<slot />
</div>
</div>
</Transition>
</Teleport>
</ClientOnly>右侧编辑面板的宽度应该归 CommonModal 管，业务内容只负责填满外壳。调用方传的是 max-width="375px" 和 placement="right"，公共弹窗最终要保证可见的 .common-modal__dialog 是 375px。
出问题的版本曾经尝试把尺寸从模板 :style 挪到 scoped CSS v-bind()：
.common-modal {
padding:
v-bind(framePaddingTop)
v-bind(framePaddingRight)
v-bind(framePaddingBottom)
v-bind(framePaddingLeft);
&__dialog {
width: v-bind(dialogWidth);
min-width: v-bind(dialogMinWidth);
max-width: v-bind(dialogMaxWidth);
height: v-bind(dialogHeight);
max-height: v-bind(dialogMaxHeight);
}
}把尺寸绑定改到 CSS v-bind() 后，模板不再直接给元素写入这些样式值，变量注入改由 SFC 的 useCssVars() 负责。Teleport + Transition + v-if 在内部组件独立创建新根时，可能漏掉新元素的 owner 标记。
哪些样式和组件行为受到影响
同一套变量注入实现的 9 组浏览器对照还覆盖了以下场景，每组经历两次打开、关闭，并分别修改文字和样式值：
| 场景 | 上游基线 | 应用候选补丁后 | 如何归因 |
|---|---|---|---|
CSS v-bind()，普通 style 或 scoped style，Teleport 内含 Transition |
初次插入缺 owner 和变量 | 初次插入即可得到变量 | 本次缺陷；不要求 scoped |
CSS v-bind()，Teleport 内普通插槽组件替换根，没有 Transition |
初次插入同样漏值 | 得到变量 | 普通 slot 根独立替换也能触发 |
静态 scoped CSS，直接写 width: 375px |
正常 | 正常 | 选择器和静态值不依赖 owner 回填 |
模板 :style 直接绑定 width、color |
正常更新 | 正常更新 | 当前元素的 style patch 负责写值 |
模板 :style 把手写 --manual-width 挂到弹窗节点 |
正常更新 | 正常更新 | 同样使用 CSS 变量，但不走 SFC owner 查询 |
| 自定义属性声明在 body，弹窗位于 body 下 | 正常继承 | 正常继承 | 继承发生在真实 target 一侧 |
自定义属性只声明在原 .panel 祖先上，弹窗传到外部 |
取不到原祖先变量，使用显式 fallback | 同样使用 fallback | Teleport 改变 DOM 继承链的正常结果，补丁不修这一项 |
| 子组件 props 更新、emit 回调、父级 provide / 子级 inject | 在该用例中均正常 | 均正常 | 不能从变量丢失推导出这些组件机制也坏了 |
这里「手写 CSS 变量」和「CSS v-bind() 生成的变量」最终都由浏览器 var() 消费，差别在变量是谁写的、写到哪里。没有使用 v-bind()，也可能因 DOM 祖先变了而丢失原本依赖的主题变量；那属于另一种定位问题。类似地，祖先选择器不再匹配、原生事件改沿 target 的 DOM 祖先冒泡，也不属于这个 owner 回填缺陷。
本轮浏览器为 Chromium 155.0.8059.85，视口 1000 × 640。对照关闭了 Transition 的 CSS 动画以稳定分离状态变化，额外检查了文本、props、emit、inject 和 owner 更新次数。完整记录见下方的影响范围对照。这些用例区分了已观察到的路径，不构成所有 Teleport 组合都正确的证明。
影响范围对照（JSON）
{
"date": "2026-10-27",
"base": "0ff253bfba3ee8d3d65448bd44ad890fd01b0ecd",
"vue": "3.5.44",
"browser": "155.0.8059.85",
"viewport": {
"width": 1000,
"height": 640
},
"method": "SFCs compiled with local compiler-sfc; upstream and patched production global runtimes; two open/close cycles; style and text changes, component emit and inject checked. Transition CSS animations disabled for deterministic state changes.",
"results": [
{
"name": "sfc-css-v-bind",
"variant": "upstream",
"states": [
{
"cycle": 0,
"before": {
"width": "928px",
"color": "rgb(0, 0, 0)",
"text": "before",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterText": {
"width": "928px",
"color": "rgb(0, 0, 0)",
"text": "after0",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after0",
"owner": "0",
"style": "--impact0-boxWidth: 450px; --impact0-boxColor: green;",
"ownerUpdates": 1
}
},
{
"cycle": 1,
"before": {
"width": "928px",
"color": "rgb(0, 0, 0)",
"text": "after0",
"owner": null,
"style": null,
"ownerUpdates": 1
},
"afterText": {
"width": "928px",
"color": "rgb(0, 0, 0)",
"text": "after1",
"owner": null,
"style": null,
"ownerUpdates": 1
},
"afterVisualVariables": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after1",
"owner": "0",
"style": "--impact0-boxWidth: 375px; --impact0-boxColor: red;",
"ownerUpdates": 2
}
}
],
"errors": []
},
{
"name": "sfc-css-v-bind",
"variant": "current",
"states": [
{
"cycle": 0,
"before": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "before",
"owner": "0",
"style": "--impact0-boxWidth: 375px; --impact0-boxColor: red;",
"ownerUpdates": 0
},
"afterText": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after0",
"owner": "0",
"style": "--impact0-boxWidth: 375px; --impact0-boxColor: red;",
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after0",
"owner": "0",
"style": "--impact0-boxWidth: 450px; --impact0-boxColor: green;",
"ownerUpdates": 1
}
},
{
"cycle": 1,
"before": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after0",
"owner": "0",
"style": "--impact0-boxWidth: 450px; --impact0-boxColor: green;",
"ownerUpdates": 1
},
"afterText": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after1",
"owner": "0",
"style": "--impact0-boxWidth: 450px; --impact0-boxColor: green;",
"ownerUpdates": 1
},
"afterVisualVariables": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after1",
"owner": "0",
"style": "--impact0-boxWidth: 375px; --impact0-boxColor: red;",
"ownerUpdates": 2
}
}
],
"errors": []
},
{
"name": "sfc-css-v-bind-scoped",
"variant": "upstream",
"states": [
{
"cycle": 0,
"before": {
"width": "928px",
"color": "rgb(0, 0, 0)",
"text": "before",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterText": {
"width": "928px",
"color": "rgb(0, 0, 0)",
"text": "after0",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after0",
"owner": "0",
"style": "--impact1-boxWidth: 450px; --impact1-boxColor: green;",
"ownerUpdates": 1
}
},
{
"cycle": 1,
"before": {
"width": "928px",
"color": "rgb(0, 0, 0)",
"text": "after0",
"owner": null,
"style": null,
"ownerUpdates": 1
},
"afterText": {
"width": "928px",
"color": "rgb(0, 0, 0)",
"text": "after1",
"owner": null,
"style": null,
"ownerUpdates": 1
},
"afterVisualVariables": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after1",
"owner": "0",
"style": "--impact1-boxWidth: 375px; --impact1-boxColor: red;",
"ownerUpdates": 2
}
}
],
"errors": []
},
{
"name": "sfc-css-v-bind-scoped",
"variant": "current",
"states": [
{
"cycle": 0,
"before": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "before",
"owner": "0",
"style": "--impact1-boxWidth: 375px; --impact1-boxColor: red;",
"ownerUpdates": 0
},
"afterText": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after0",
"owner": "0",
"style": "--impact1-boxWidth: 375px; --impact1-boxColor: red;",
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after0",
"owner": "0",
"style": "--impact1-boxWidth: 450px; --impact1-boxColor: green;",
"ownerUpdates": 1
}
},
{
"cycle": 1,
"before": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after0",
"owner": "0",
"style": "--impact1-boxWidth: 450px; --impact1-boxColor: green;",
"ownerUpdates": 1
},
"afterText": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after1",
"owner": "0",
"style": "--impact1-boxWidth: 450px; --impact1-boxColor: green;",
"ownerUpdates": 1
},
"afterVisualVariables": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after1",
"owner": "0",
"style": "--impact1-boxWidth: 375px; --impact1-boxColor: red;",
"ownerUpdates": 2
}
}
],
"errors": []
},
{
"name": "slot-root-css-v-bind",
"variant": "upstream",
"states": [
{
"cycle": 0,
"before": {
"width": "928px",
"color": "rgb(0, 0, 0)",
"text": "before",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterText": {
"width": "928px",
"color": "rgb(0, 0, 0)",
"text": "after0",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after0",
"owner": "0",
"style": "--impact2-boxWidth: 450px; --impact2-boxColor: green;",
"ownerUpdates": 1
}
},
{
"cycle": 1,
"before": {
"width": "928px",
"color": "rgb(0, 0, 0)",
"text": "after0",
"owner": null,
"style": null,
"ownerUpdates": 1
},
"afterText": {
"width": "928px",
"color": "rgb(0, 0, 0)",
"text": "after1",
"owner": null,
"style": null,
"ownerUpdates": 1
},
"afterVisualVariables": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after1",
"owner": "0",
"style": "--impact2-boxWidth: 375px; --impact2-boxColor: red;",
"ownerUpdates": 2
}
}
],
"errors": []
},
{
"name": "slot-root-css-v-bind",
"variant": "current",
"states": [
{
"cycle": 0,
"before": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "before",
"owner": "0",
"style": "--impact2-boxWidth: 375px; --impact2-boxColor: red;",
"ownerUpdates": 0
},
"afterText": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after0",
"owner": "0",
"style": "--impact2-boxWidth: 375px; --impact2-boxColor: red;",
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after0",
"owner": "0",
"style": "--impact2-boxWidth: 450px; --impact2-boxColor: green;",
"ownerUpdates": 1
}
},
{
"cycle": 1,
"before": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after0",
"owner": "0",
"style": "--impact2-boxWidth: 450px; --impact2-boxColor: green;",
"ownerUpdates": 1
},
"afterText": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after1",
"owner": "0",
"style": "--impact2-boxWidth: 450px; --impact2-boxColor: green;",
"ownerUpdates": 1
},
"afterVisualVariables": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after1",
"owner": "0",
"style": "--impact2-boxWidth: 375px; --impact2-boxColor: red;",
"ownerUpdates": 2
}
}
],
"errors": []
},
{
"name": "static-scoped-style",
"variant": "upstream",
"states": [
{
"cycle": 0,
"before": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "before",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterText": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after0",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after0",
"owner": null,
"style": null,
"ownerUpdates": 0
}
},
{
"cycle": 1,
"before": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after0",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterText": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after1",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after1",
"owner": null,
"style": null,
"ownerUpdates": 0
}
}
],
"errors": []
},
{
"name": "static-scoped-style",
"variant": "current",
"states": [
{
"cycle": 0,
"before": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "before",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterText": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after0",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after0",
"owner": null,
"style": null,
"ownerUpdates": 0
}
},
{
"cycle": 1,
"before": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after0",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterText": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after1",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after1",
"owner": null,
"style": null,
"ownerUpdates": 0
}
}
],
"errors": []
},
{
"name": "template-inline-style",
"variant": "upstream",
"states": [
{
"cycle": 0,
"before": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "before",
"owner": null,
"style": "width: 375px; color: red;",
"ownerUpdates": 0
},
"afterText": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after0",
"owner": null,
"style": "width: 375px; color: red;",
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after0",
"owner": null,
"style": "width: 450px; color: green;",
"ownerUpdates": 0
}
},
{
"cycle": 1,
"before": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after0",
"owner": null,
"style": "width: 450px; color: green;",
"ownerUpdates": 0
},
"afterText": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after1",
"owner": null,
"style": "width: 450px; color: green;",
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after1",
"owner": null,
"style": "width: 375px; color: red;",
"ownerUpdates": 0
}
}
],
"errors": []
},
{
"name": "template-inline-style",
"variant": "current",
"states": [
{
"cycle": 0,
"before": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "before",
"owner": null,
"style": "width: 375px; color: red;",
"ownerUpdates": 0
},
"afterText": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after0",
"owner": null,
"style": "width: 375px; color: red;",
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after0",
"owner": null,
"style": "width: 450px; color: green;",
"ownerUpdates": 0
}
},
{
"cycle": 1,
"before": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after0",
"owner": null,
"style": "width: 450px; color: green;",
"ownerUpdates": 0
},
"afterText": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after1",
"owner": null,
"style": "width: 450px; color: green;",
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after1",
"owner": null,
"style": "width: 375px; color: red;",
"ownerUpdates": 0
}
}
],
"errors": []
},
{
"name": "template-custom-properties",
"variant": "upstream",
"states": [
{
"cycle": 0,
"before": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "before",
"owner": null,
"style": "--manual-width: 375px; --manual-color: red;",
"ownerUpdates": 0
},
"afterText": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after0",
"owner": null,
"style": "--manual-width: 375px; --manual-color: red;",
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after0",
"owner": null,
"style": "--manual-width: 450px; --manual-color: green;",
"ownerUpdates": 0
}
},
{
"cycle": 1,
"before": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after0",
"owner": null,
"style": "--manual-width: 450px; --manual-color: green;",
"ownerUpdates": 0
},
"afterText": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after1",
"owner": null,
"style": "--manual-width: 450px; --manual-color: green;",
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after1",
"owner": null,
"style": "--manual-width: 375px; --manual-color: red;",
"ownerUpdates": 0
}
}
],
"errors": []
},
{
"name": "template-custom-properties",
"variant": "current",
"states": [
{
"cycle": 0,
"before": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "before",
"owner": null,
"style": "--manual-width: 375px; --manual-color: red;",
"ownerUpdates": 0
},
"afterText": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after0",
"owner": null,
"style": "--manual-width: 375px; --manual-color: red;",
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after0",
"owner": null,
"style": "--manual-width: 450px; --manual-color: green;",
"ownerUpdates": 0
}
},
{
"cycle": 1,
"before": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after0",
"owner": null,
"style": "--manual-width: 450px; --manual-color: green;",
"ownerUpdates": 0
},
"afterText": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after1",
"owner": null,
"style": "--manual-width: 450px; --manual-color: green;",
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after1",
"owner": null,
"style": "--manual-width: 375px; --manual-color: red;",
"ownerUpdates": 0
}
}
],
"errors": []
},
{
"name": "body-custom-properties",
"variant": "upstream",
"states": [
{
"cycle": 0,
"before": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "before",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterText": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after0",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after0",
"owner": null,
"style": null,
"ownerUpdates": 0
}
},
{
"cycle": 1,
"before": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after0",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterText": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after1",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after1",
"owner": null,
"style": null,
"ownerUpdates": 0
}
}
],
"errors": []
},
{
"name": "body-custom-properties",
"variant": "current",
"states": [
{
"cycle": 0,
"before": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "before",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterText": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after0",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after0",
"owner": null,
"style": null,
"ownerUpdates": 0
}
},
{
"cycle": 1,
"before": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after0",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterText": {
"width": "450px",
"color": "rgb(0, 128, 0)",
"text": "after1",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "after1",
"owner": null,
"style": null,
"ownerUpdates": 0
}
}
],
"errors": []
},
{
"name": "original-ancestor-custom-properties",
"variant": "upstream",
"states": [
{
"cycle": 0,
"before": {
"width": "111px",
"color": "rgb(0, 0, 0)",
"text": "before",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterText": {
"width": "111px",
"color": "rgb(0, 0, 0)",
"text": "after0",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "111px",
"color": "rgb(0, 0, 0)",
"text": "after0",
"owner": null,
"style": null,
"ownerUpdates": 0
}
},
{
"cycle": 1,
"before": {
"width": "111px",
"color": "rgb(0, 0, 0)",
"text": "after0",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterText": {
"width": "111px",
"color": "rgb(0, 0, 0)",
"text": "after1",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "111px",
"color": "rgb(0, 0, 0)",
"text": "after1",
"owner": null,
"style": null,
"ownerUpdates": 0
}
}
],
"errors": []
},
{
"name": "original-ancestor-custom-properties",
"variant": "current",
"states": [
{
"cycle": 0,
"before": {
"width": "111px",
"color": "rgb(0, 0, 0)",
"text": "before",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterText": {
"width": "111px",
"color": "rgb(0, 0, 0)",
"text": "after0",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "111px",
"color": "rgb(0, 0, 0)",
"text": "after0",
"owner": null,
"style": null,
"ownerUpdates": 0
}
},
{
"cycle": 1,
"before": {
"width": "111px",
"color": "rgb(0, 0, 0)",
"text": "after0",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterText": {
"width": "111px",
"color": "rgb(0, 0, 0)",
"text": "after1",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "111px",
"color": "rgb(0, 0, 0)",
"text": "after1",
"owner": null,
"style": null,
"ownerUpdates": 0
}
}
],
"errors": []
},
{
"name": "component-props-emit-inject",
"variant": "upstream",
"states": [
{
"cycle": 0,
"before": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "parent:before",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterText": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "parent:after0",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "parent:after0",
"owner": null,
"style": null,
"ownerUpdates": 0
}
},
{
"cycle": 1,
"before": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "parent:after0",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterText": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "parent:after1",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "parent:after1",
"owner": null,
"style": null,
"ownerUpdates": 0
}
}
],
"errors": []
},
{
"name": "component-props-emit-inject",
"variant": "current",
"states": [
{
"cycle": 0,
"before": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "parent:before",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterText": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "parent:after0",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "parent:after0",
"owner": null,
"style": null,
"ownerUpdates": 0
}
},
{
"cycle": 1,
"before": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "parent:after0",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterText": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "parent:after1",
"owner": null,
"style": null,
"ownerUpdates": 0
},
"afterVisualVariables": {
"width": "375px",
"color": "rgb(255, 0, 0)",
"text": "parent:after1",
"owner": null,
"style": null,
"ownerUpdates": 0
}
}
],
"errors": []
}
]
}open 与宽度为什么触发不同的更新
两次赋值能触发不同范围的更新，差异来自首次挂载时的依赖收集。以下使用 Vue 3.5.44 的正式版实现，不包含候选补丁。样例的 open 初始为 false，模板主体是：
<div class="owner">
<Teleport to="body">
<Transition :css="false">
<div v-if="open" class="probe">{{ label }}</div>
</Transition>
</Teleport>
</div>open、label、boxWidth 和 boxColor 都是同一个 <script setup> 中声明的 ref；CSS 使用 width: v-bind(boxWidth) 和 color: v-bind(boxColor)。模板只在插槽内部读取 open，外层没有显示它的值，也没有用它决定 Teleport 的 props。关闭 CSS 动画是为了分离状态变化，组件仍然经过 Transition / BaseTransition 的插槽渲染路径。
以下样例使用普通 Teleport，open 只在 Transition 的插槽中读取；宽度和颜色由 CSS v-bind() 使用，初值分别为 375px、red。初始关闭，先打开，再只把宽度改为 450px。
依赖记在读取时正在执行的 effect 上
Vue 用 effect 表示一段会因依赖变化而重新执行的工作。组件的 render effect 就负责生成这次的 VNode，再把变化 patch 到 DOM。它的执行范围覆盖了 render 和同步 patch，所以在 patch 里调用的普通函数，也可能读取到它的依赖。
Teleport 在这条 VDOM 路径由 renderer 直接调用 TeleportImpl.process()，没有为自己单独建立 render effect。这里的「外层更新」指声明它的 SFC 的 render effect 重新执行，并在 patch 中经过 Teleport。
setupRenderEffect() 把 componentUpdateFn 包进 effect。下面是调度相关的源码节选，省略了 effect scope、调试钩子和首次调用：
// core/packages/runtime-core/src/renderer.ts:1628-1635
const effect = (instance.effect = new ReactiveEffect(componentUpdateFn))
const update = (instance.update = effect.run.bind(effect))
const job: SchedulerJob = (instance.job = effect.runIfDirty.bind(effect))
job.i = instance
job.id = instance.uid
effect.scheduler = () => queueJob(job)update 用于直接执行，job 是依赖变化后放进调度队列的任务。componentUpdateFn 内部会先调用 renderComponentRoot(instance)，随后调用 patch()；这两个步骤都在同一次 effect 执行中。
ReactiveEffect.run() 会把自己设为 activeSub，也就是当前收集依赖的订阅者。下面是保留切换位置的阅读版，省略了停止状态、依赖清理、标记和调试检查：
// core/packages/reactivity/src/effect.ts:162-199，节选
run(): T {
// ...省略状态检查与依赖清理
const prevEffect = activeSub
const prevShouldTrack = shouldTrack
activeSub = this
shouldTrack = true
try {
return this.fn()
} finally {
// ...省略调试检查与依赖清理
activeSub = prevEffect
shouldTrack = prevShouldTrack
// ...省略运行标记复位
}
}ref 的 .value getter 会调用自己的 dep.track()；Dep.track() 把当前 activeSub 记为订阅者。变量在哪里声明、通过谁的闭包拿到，都不决定订阅者是谁。官方深入响应式系统中的活动 effect 模型也遵循这个原则；这里的 activeSub 是当前版本源码使用的名字。
这段保存、恢复逻辑还处理了嵌套执行。外层组件 patch 到子组件时，会暂时进入子组件的 effect；子组件挂载结束返回后，finally 又把 activeSub 恢复为外层 effect。外层 effect 要等自己的整段同步 patch 结束才退出。
open 在 BaseTransition 调用插槽时才被读取
编译器会把 Transition 的子内容包装成函数。实际编译产物的 render 如下，省略了 helper 导入和 setup() 中的状态声明；_hoisted_1、_hoisted_2 分别是 { class: "owner" } 和 { key: 0, class: "probe" }：
// EffectDependencyDemo.vue 的实际 compileScript 输出，setup() 返回部分
return (_ctx, _cache) => {
return (_openBlock(), _createElementBlock("div", _hoisted_1, [
(_openBlock(), _createBlock(_Teleport, { to: "body" }, [
_createVNode(_Transition, { css: false }, {
default: _withCtx(() => [
(open.value)
? (_openBlock(), _createElementBlock("div", _hoisted_2, _toDisplayString(label.value), 1 /* TEXT */))
: _createCommentVNode("v-if", true)
]),
_: 1 /* STABLE */
})
]))
]))
}_createElementBlock、_createBlock 和 _createVNode 都在创建相应的 VNode；_openBlock 负责配合记录需要更新的节点。这里决定依赖归属的结构是 default: _withCtx(() => ...)。外层 render 创建了这个函数，却没有立即执行其中的 open.value。这就像创建 () => open.value 时，并不会调用 open 的 getter。
DOM 版 Transition 把插槽交给 BaseTransition。等到 BaseTransition 的 render 调用 slots.default() 时，函数体才执行，此时 activeSub 是 BaseTransition 的 render effect。因此，这个内部 effect 会订阅 open；打开后，函数体开始读取 label，它也成为该 effect 的依赖。
withCtx() 管的是另一份上下文。下面是其包装函数中的节选，省略了 block 管理和调试通知：
// core/packages/runtime-core/src/componentRenderContext.ts:82-111，节选
const renderFnWithContext: ContextualRenderFn = (...args: any[]) => {
// ...省略 block 管理
const prevInstance = setCurrentRenderingInstance(ctx)
// ...省略 block 栈状态
let res
try {
res = fn(...args)
} finally {
// ...省略未闭合 block 的清理
setCurrentRenderingInstance(prevInstance)
// ...省略 block 管理
}
// ...省略调试通知
return res
}它恢复插槽声明方的 currentRenderingInstance，让新 VNode 保留正确的 owner、scope 等上下文；没有替换响应式系统的 activeSub。所以插槽里的 VNode 可以归外层组件所有，同时由 BaseTransition 的 effect 收集这次读取。源码中的 setBlockTracking(-1) 也只控制 VNode block 优化记录，不是在暂停 ref 的依赖收集。
open 从 false 变成 true 后，调度队列只需执行 BaseTransition 的更新任务，把它的 subTree 从注释节点换成 div。renderer 从该实例开始 patch，外面的 Teleport VNode 没有进入 process()，原有的 updateCssVars() 自然也没有在这次插入后调用。
首次挂载已经让外层订阅了宽度
boxWidth 只写在 CSS 里，仍然可能成为外层 render effect 的依赖。最早的读取发生在首次挂载，并不需要等到外层已经更新过一次。
Teleport 的 mountToTarget() 先 mount(vnode, target, targetAnchor)，挂载完内容，再调用 updateCssVars(vnode, false)。内部组件的 effect 此时已经返回，activeSub 恢复成正在 patch Teleport 的外层 effect。
updateCssVars() 调用 ctx.ut() 时没有传实参。ut 在 useCssVars() 中定义如下：
// core/packages/runtime-dom/src/helpers/useCssVars.ts:34-38
const updateTeleports = (instance.ut = (vars = getter(instance.proxy)) => {
Array.from(
document.querySelectorAll(`[data-v-owner="${instance.uid}"]`),
).forEach(node => setVarsOnNode(node, vars))
})JavaScript 会先计算默认参数 getter(instance.proxy)，再执行函数体里的查询。编译生成的 getter 读取 boxWidth.value、boxColor.value，这一轮没有新 effect 接管，也没有暂停响应式追踪，于是外层 render effect 订阅了这两个 ref。
这里 ctx 指向外层 SFC 实例，而 activeSub 是读取发生时的 effect。这组样例由该 SFC 直接 patch Teleport，所以两者此时恰好对应同一个组件；依赖收集仍然由 activeSub 决定，ctx 不负责选择订阅者。
初始 open=false，target 范围内只有占位节点，仍然会发生这次读取。ctx.ut() 放在标记节点的循环后面，只要存在这个更新器就会调用；默认参数也会在 querySelectorAll() 返回空结果之前求值。没有可写入的弹窗元素，不等于 getter 没有执行。
等外层组件进入 onMounted，useCssVars() 再创建 watch(setVars, NOOP, { flush: 'post' })。watch 会用自己的 effect 执行 setVars，读取同一个 getter，又独立订阅宽度和颜色。首次挂载结束时，开发版日志和 ref 订阅链记录如下：
| ref | 首次挂载结束时的订阅者 |
|---|---|
open |
BaseTransition 的 render effect |
boxWidth、boxColor |
外层 render effect、CSS watch effect |
label |
没有订阅者，false 分支尚未读取它 |
图中右侧只画出了外层 render effect 收集宽度的现场；CSS watch 在 mounted 阶段另建自己的订阅。两份订阅分别调度，不会相互转换。
改宽度时，外层更新与 CSS watch 分别执行
把 boxWidth 从 375px 改成 450px，会通知上面两份订阅。外层组件的更新任务重新生成 VNode，再 patch 到 Teleport。此时打开操作留下的 div 已经存在，updateCssVars() 可以给它补上 data-v-owner，随后的 ctx.ut() 也能查到并写入变量。
CSS watch 使用 flush: 'post'，在这一轮组件更新之后执行自己的 setVars()，写普通根，再按 owner 查找外置根。setVars() 已经算好了 vars，所以调用的是 updateTeleports(vars)，不会再次计算默认参数。它自己运行时的依赖属于 CSS watch effect；传入 instance.proxy 只是让 getter 能取到值，不会把当前 effect 切换成组件的 render effect。
所以这里触发外层重新渲染的直接原因，是外层 render effect 此前已经订阅了宽度。CSS watch 单独执行时仍然只按现有 owner 查询，没有给未知节点补标记的能力。把「CSS 变量变化」笼统理解成「Vue 必定重新渲染外层组件」，会漏掉这两条路径的区别。
defer 对照能验证这条恢复链的条件
2026-10-27 额外做了三组对照，分别加载未修改的上游开发版和生产版 runtime。开发版记录 renderTracked、renderTriggered、CSS watch 的调试事件和读取栈；生产版核对同样的布局与更新次数。视口为 1000 × 640，body 外边距为 36px，缺少宽度变量的 div 占满剩余的 928px。表中 0 → 1 指先打开、再单独改变宽度时，外层 onUpdated 的累计计数：
| 模板变化 | 首次打开 | 改宽度后 | 外层更新计数 |
|---|---|---|---|
| 上面的普通 Teleport | 缺 owner，928px | 补 owner，450px | 0 → 1 |
只给 Teleport 加 defer |
缺 owner，928px | 仍缺 owner，928px | 0 → 0 |
普通 Teleport，插槽外也读取 open |
缺 owner，928px | 补 owner，450px | 1 → 2 |
defer 的首次 mountToTarget() 在渲染后的队列执行。它调用 ctx.ut() 时，外层的同步 render effect 已经结束，外层没有经这条调用订阅宽度；CSS watch 仍然订阅着宽度。改宽度后，普通 .owner 根上的变量更新为 450px，外置 div 仍然没有 owner，CSS watch 查不到它。
插槽外增加 <p>{{ open }}</p> 会让外层和 BaseTransition 都订阅 open。本例的稳定插槽、未变化的 props 让子组件仍由自己的排队任务更新。外层先经过 Teleport 时，目标里还是注释；稍后内部任务才插入 div，所以这一次仍会漏标。源码中的 updateComponent() 会通过 shouldUpdateComponent() 判断是否从父级 patch 同步更新子组件；父组件有更新任务，不保证把每个子组件的独立任务都提前执行。
这些结果在开发版、生产版中一致，关闭重开后再单独改变宽度也得到相同结果。完整 SFC、编译输出、各阶段订阅者和开发版调用栈见下方的依赖收集与恢复路径记录。调试钩子和订阅链读取只用于验证，业务修复不依赖它们。
依赖收集与恢复路径记录（JSON）
{
"date": "2026-10-27",
"vue": "3.5.44",
"base": "0ff253bfba3ee8d3d65448bd44ad890fd01b0ecd",
"browser": "155.0.8059.85",
"viewport": {
"width": 1000,
"height": 640
},
"documentCss": "body { margin: 36px }",
"transitionCssAnimations": false,
"method": "Unmodified upstream development/production global runtimes. Development uses renderTracked/renderTriggered mixin hooks and CSS watch effect debug hooks with stack traces. Ref.dep subscriber introspection is diagnostic only. CSS animations disabled. Only boxWidth changes in width-only phases; boxColor remains red.",
"results": [
{
"name": "transition-slot",
"mode": "development",
"input": "<script setup>\nimport { ref, onUpdated, getCurrentInstance } from 'vue'\nconst open = ref(false)\nconst boxWidth = ref('375px')\nconst boxColor = ref('red')\nconst label = ref('before')\nlet ownerUpdates = 0\nonUpdated(() => { ownerUpdates++ })\nwindow.demo = { open, boxWidth, boxColor, label, instance: getCurrentInstance(), getOwnerUpdates: () => ownerUpdates }\nfor (const [name, target] of Object.entries({ open, boxWidth, boxColor, label })) window.targetNames.set(target, name)\n</script>\n<template>\n <div class=\"owner\">\n \n <Teleport to=\"body\">\n <Transition :css=\"false\">\n <div v-if=\"open\" class=\"probe\">{{ label }}</div>\n </Transition>\n </Teleport>\n </div>\n</template>\n<style>.probe { width: v-bind(boxWidth); color: v-bind(boxColor) }</style>",
"compiledScript": "import { useCssVars as _useCssVars, unref as _unref } from 'vue'\nimport { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, Teleport as _Teleport, createBlock as _createBlock } from \"vue\"\n\nconst _hoisted_1 = { class: \"owner\" }\nconst _hoisted_2 = {\n key: 0,\n class: \"probe\"\n}\n\nimport { ref, onUpdated, getCurrentInstance } from 'vue'\n\nexport default {\n __name: 'EffectDependencyDemo',\n setup(__props) {\n\n_useCssVars(_ctx => ({\n \"depdemo-boxWidth\": (boxWidth.value),\n \"depdemo-boxColor\": (boxColor.value)\n}))\n\nconst open = ref(false)\nconst boxWidth = ref('375px')\nconst boxColor = ref('red')\nconst label = ref('before')\nlet ownerUpdates = 0\nonUpdated(() => { ownerUpdates++ })\nwindow.demo = { open, boxWidth, boxColor, label, instance: getCurrentInstance(), getOwnerUpdates: () => ownerUpdates }\nfor (const [name, target] of Object.entries({ open, boxWidth, boxColor, label })) window.targetNames.set(target, name)\n\nreturn (_ctx, _cache) => {\n return (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n (_openBlock(), _createBlock(_Teleport, { to: \"body\" }, [\n _createVNode(_Transition, { css: false }, {\n default: _withCtx(() => [\n (open.value)\n ? (_openBlock(), _createElementBlock(\"div\", _hoisted_2, _toDisplayString(label.value), 1 /* TEXT */))\n : _createCommentVNode(\"v-if\", true)\n ]),\n _: 1 /* STABLE */\n })\n ]))\n ]))\n}\n}\n\n}",
"compiledCss": ".probe { width: var(--depdemo-boxWidth); color: var(--depdemo-boxColor)\n}",
"bundleSha256": "a6d3194b6a18e80af313105454ffe71e67b4da1550db49265cf1a5912afa7cc3",
"states": [
{
"phase": "mount",
"ownerUpdates": 0,
"dependencies": {
"open": [
"BaseTransition.render"
],
"boxWidth": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"label": []
},
"ownerRootStyle": "--depdemo-boxWidth: 375px; --depdemo-boxColor: red;",
"element": null
},
{
"phase": "open",
"ownerUpdates": 0,
"dependencies": {
"open": [
"BaseTransition.render"
],
"boxWidth": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 375px; --depdemo-boxColor: red;",
"element": {
"text": "before",
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"style": null
}
},
{
"phase": "text",
"ownerUpdates": 0,
"dependencies": {
"open": [
"BaseTransition.render"
],
"boxWidth": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 375px; --depdemo-boxColor: red;",
"element": {
"text": "after",
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"style": null
}
},
{
"phase": "width-only",
"ownerUpdates": 1,
"dependencies": {
"open": [
"BaseTransition.render"
],
"boxWidth": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 450px; --depdemo-boxColor: red;",
"element": {
"text": "after",
"width": "450px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"style": "--depdemo-boxWidth: 450px; --depdemo-boxColor: red;"
}
},
{
"phase": "close",
"ownerUpdates": 1,
"dependencies": {
"open": [
"BaseTransition.render"
],
"boxWidth": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"label": []
},
"ownerRootStyle": "--depdemo-boxWidth: 450px; --depdemo-boxColor: red;",
"element": null
},
{
"phase": "reopen",
"ownerUpdates": 1,
"dependencies": {
"open": [
"BaseTransition.render"
],
"boxWidth": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 450px; --depdemo-boxColor: red;",
"element": {
"text": "after",
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"style": null
}
},
{
"phase": "width-only-again",
"ownerUpdates": 2,
"dependencies": {
"open": [
"BaseTransition.render"
],
"boxWidth": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 500px; --depdemo-boxColor: red;",
"element": {
"text": "after",
"width": "500px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"style": "--depdemo-boxWidth: 500px; --depdemo-boxColor: red;"
}
}
],
"trace": [
{
"phase": "mount",
"event": "track",
"component": "BaseTransition",
"target": "open",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:53:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:35:17\n at Proxy.renderFnWithContext (vue-upstream-0ff253b.js:3236:15)\n at Proxy.<anonymous> (vue-upstream-0ff253b.js:3880:81)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8746:48)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at setupRenderEffect (vue-upstream-0ff253b.js:8881:7)\n at mountComponent (vue-upstream-0ff253b.js:8650:9)\n at processComponent (vue-upstream-0ff253b.js:8597:11)\n at patch (vue-upstream-0ff253b.js:8101:13)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8753:13)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at setupRenderEffect (vue-upstream-0ff253b.js:8881:7)\n at mountComponent (vue-upstream-0ff253b.js:8650:9)\n at processComponent (vue-upstream-0ff253b.js:8597:11)\n at patch (vue-upstream-0ff253b.js:8101:13)\n at mountChildren (vue-upstream-0ff253b.js:8352:9)\n at mount (vue-upstream-0ff253b.js:3508:11)\n at mountToTarget (vue-upstream-0ff253b.js:3534:13)\n at Object.process (vue-upstream-0ff253b.js:3568:9)\n at patch (vue-upstream-0ff253b.js:8113:18)\n at mountChildren (vue-upstream-0ff253b.js:8352:9)\n at mountElement (vue-upstream-0ff253b.js:8268:9)\n at processElement (vue-upstream-0ff253b.js:8223:9)\n at patch (vue-upstream-0ff253b.js:8089:13)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8753:13)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at setupRenderEffect (vue-upstream-0ff253b.js:8881:7)\n at mountComponent (vue-upstream-0ff253b.js:8650:9)\n at processComponent (vue-upstream-0ff253b.js:8597:11)\n at patch (vue-upstream-0ff253b.js:8101:13)\n at vue-upstream-0ff253b.js:9438:11\n at flushOnAppMount (vue-upstream-0ff253b.js:2916:5)\n at render (vue-upstream-0ff253b.js:9432:7)\n at mount (vue-upstream-0ff253b.js:6872:15)\n at app.mount (vue-upstream-0ff253b.js:13262:21)\n at EffectDependencyDemo.compiled.js:60:12\n at addScriptContent (eval at evaluate (:370:30), <anonymous>:7:25)\n at UtilityScript.evaluate (<anonymous>:372:16)\n at UtilityScript.<anonymous> (<anonymous>:1:44)"
},
{
"phase": "mount",
"event": "track",
"component": "EffectDependencyDemo",
"target": "boxWidth",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:53:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:17:33\n at instance.ut (vue-upstream-0ff253b.js:11711:51)\n at updateCssVars (vue-upstream-0ff253b.js:3821:11)\n at mountToTarget (vue-upstream-0ff253b.js:3535:13)\n at Object.process (vue-upstream-0ff253b.js:3568:9)\n at patch (vue-upstream-0ff253b.js:8113:18)\n at mountChildren (vue-upstream-0ff253b.js:8352:9)\n at mountElement (vue-upstream-0ff253b.js:8268:9)\n at processElement (vue-upstream-0ff253b.js:8223:9)\n at patch (vue-upstream-0ff253b.js:8089:13)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8753:13)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at setupRenderEffect (vue-upstream-0ff253b.js:8881:7)\n at mountComponent (vue-upstream-0ff253b.js:8650:9)\n at processComponent (vue-upstream-0ff253b.js:8597:11)\n at patch (vue-upstream-0ff253b.js:8101:13)\n at vue-upstream-0ff253b.js:9438:11\n at flushOnAppMount (vue-upstream-0ff253b.js:2916:5)\n at render (vue-upstream-0ff253b.js:9432:7)\n at mount (vue-upstream-0ff253b.js:6872:15)\n at app.mount (vue-upstream-0ff253b.js:13262:21)\n at EffectDependencyDemo.compiled.js:60:12\n at addScriptContent (eval at evaluate (:370:30), <anonymous>:7:25)\n at UtilityScript.evaluate (<anonymous>:372:16)\n at UtilityScript.<anonymous> (<anonymous>:1:44)"
},
{
"phase": "mount",
"event": "track",
"component": "EffectDependencyDemo",
"target": "boxColor",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:53:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:18:33\n at instance.ut (vue-upstream-0ff253b.js:11711:51)\n at updateCssVars (vue-upstream-0ff253b.js:3821:11)\n at mountToTarget (vue-upstream-0ff253b.js:3535:13)\n at Object.process (vue-upstream-0ff253b.js:3568:9)\n at patch (vue-upstream-0ff253b.js:8113:18)\n at mountChildren (vue-upstream-0ff253b.js:8352:9)\n at mountElement (vue-upstream-0ff253b.js:8268:9)\n at processElement (vue-upstream-0ff253b.js:8223:9)\n at patch (vue-upstream-0ff253b.js:8089:13)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8753:13)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at setupRenderEffect (vue-upstream-0ff253b.js:8881:7)\n at mountComponent (vue-upstream-0ff253b.js:8650:9)\n at processComponent (vue-upstream-0ff253b.js:8597:11)\n at patch (vue-upstream-0ff253b.js:8101:13)\n at vue-upstream-0ff253b.js:9438:11\n at flushOnAppMount (vue-upstream-0ff253b.js:2916:5)\n at render (vue-upstream-0ff253b.js:9432:7)\n at mount (vue-upstream-0ff253b.js:6872:15)\n at app.mount (vue-upstream-0ff253b.js:13262:21)\n at EffectDependencyDemo.compiled.js:60:12\n at addScriptContent (eval at evaluate (:370:30), <anonymous>:7:25)\n at UtilityScript.evaluate (<anonymous>:372:16)\n at UtilityScript.<anonymous> (<anonymous>:1:44)"
},
{
"phase": "open",
"event": "trigger",
"component": "BaseTransition",
"target": "open",
"key": "value"
},
{
"phase": "open",
"event": "track",
"component": "BaseTransition",
"target": "open",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:53:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:35:17\n at Proxy.renderFnWithContext (vue-upstream-0ff253b.js:3236:15)\n at Proxy.<anonymous> (vue-upstream-0ff253b.js:3880:81)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8824:28)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "open",
"event": "track",
"component": "BaseTransition",
"target": "label",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:53:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:36:92\n at Proxy.renderFnWithContext (vue-upstream-0ff253b.js:3236:15)\n at Proxy.<anonymous> (vue-upstream-0ff253b.js:3880:81)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8824:28)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "text",
"event": "trigger",
"component": "BaseTransition",
"target": "label",
"key": "value"
},
{
"phase": "text",
"event": "track",
"component": "BaseTransition",
"target": "open",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:53:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:35:17\n at Proxy.renderFnWithContext (vue-upstream-0ff253b.js:3236:15)\n at Proxy.<anonymous> (vue-upstream-0ff253b.js:3880:81)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8824:28)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "text",
"event": "track",
"component": "BaseTransition",
"target": "label",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:53:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:36:92\n at Proxy.renderFnWithContext (vue-upstream-0ff253b.js:3236:15)\n at Proxy.<anonymous> (vue-upstream-0ff253b.js:3880:81)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8824:28)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "width-only",
"event": "trigger",
"component": "EffectDependencyDemo",
"target": "boxWidth",
"key": "value"
},
{
"phase": "width-only",
"event": "trigger",
"component": "CSS watch",
"target": "boxWidth",
"key": "value"
},
{
"phase": "width-only",
"event": "track",
"component": "EffectDependencyDemo",
"target": "boxWidth",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:53:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:17:33\n at instance.ut (vue-upstream-0ff253b.js:11711:51)\n at updateCssVars (vue-upstream-0ff253b.js:3821:11)\n at Object.process (vue-upstream-0ff253b.js:3657:9)\n at patch (vue-upstream-0ff253b.js:8113:18)\n at patchBlockChildren (vue-upstream-0ff253b.js:8480:9)\n at patchElement (vue-upstream-0ff253b.js:8397:9)\n at processElement (vue-upstream-0ff253b.js:8239:11)\n at patch (vue-upstream-0ff253b.js:8089:13)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8833:11)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "width-only",
"event": "track",
"component": "EffectDependencyDemo",
"target": "boxColor",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:53:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:18:33\n at instance.ut (vue-upstream-0ff253b.js:11711:51)\n at updateCssVars (vue-upstream-0ff253b.js:3821:11)\n at Object.process (vue-upstream-0ff253b.js:3657:9)\n at patch (vue-upstream-0ff253b.js:8113:18)\n at patchBlockChildren (vue-upstream-0ff253b.js:8480:9)\n at patchElement (vue-upstream-0ff253b.js:8397:9)\n at processElement (vue-upstream-0ff253b.js:8239:11)\n at patch (vue-upstream-0ff253b.js:8089:13)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8833:11)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "width-only",
"event": "track",
"component": "CSS watch",
"target": "boxWidth",
"key": "value",
"stack": "Error\n at effect.<computed> [as onTrack] (eval at evaluate (:370:30), <anonymous>:9:150)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:17:33\n at setVars (vue-upstream-0ff253b.js:11720:20)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at baseWatchOptions.call (vue-upstream-0ff253b.js:3401:49)\n at ReactiveEffect.getter [as fn] (vue-upstream-0ff253b.js:2367:31)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at job (vue-upstream-0ff253b.js:2419:33)\n at flushPostFlushCbs (vue-upstream-0ff253b.js:2902:30)\n at flushJobs (vue-upstream-0ff253b.js:2960:7)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "width-only",
"event": "track",
"component": "CSS watch",
"target": "boxColor",
"key": "value",
"stack": "Error\n at effect.<computed> [as onTrack] (eval at evaluate (:370:30), <anonymous>:9:150)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:18:33\n at setVars (vue-upstream-0ff253b.js:11720:20)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at baseWatchOptions.call (vue-upstream-0ff253b.js:3401:49)\n at ReactiveEffect.getter [as fn] (vue-upstream-0ff253b.js:2367:31)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at job (vue-upstream-0ff253b.js:2419:33)\n at flushPostFlushCbs (vue-upstream-0ff253b.js:2902:30)\n at flushJobs (vue-upstream-0ff253b.js:2960:7)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "close",
"event": "trigger",
"component": "BaseTransition",
"target": "open",
"key": "value"
},
{
"phase": "close",
"event": "track",
"component": "BaseTransition",
"target": "open",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:53:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:35:17\n at Proxy.renderFnWithContext (vue-upstream-0ff253b.js:3236:15)\n at Proxy.<anonymous> (vue-upstream-0ff253b.js:3880:81)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8824:28)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "reopen",
"event": "trigger",
"component": "BaseTransition",
"target": "open",
"key": "value"
},
{
"phase": "reopen",
"event": "track",
"component": "BaseTransition",
"target": "open",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:53:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:35:17\n at Proxy.renderFnWithContext (vue-upstream-0ff253b.js:3236:15)\n at Proxy.<anonymous> (vue-upstream-0ff253b.js:3880:81)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8824:28)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "reopen",
"event": "track",
"component": "BaseTransition",
"target": "label",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:53:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:36:92\n at Proxy.renderFnWithContext (vue-upstream-0ff253b.js:3236:15)\n at Proxy.<anonymous> (vue-upstream-0ff253b.js:3880:81)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8824:28)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "width-only-again",
"event": "trigger",
"component": "EffectDependencyDemo",
"target": "boxWidth",
"key": "value"
},
{
"phase": "width-only-again",
"event": "trigger",
"component": "CSS watch",
"target": "boxWidth",
"key": "value"
},
{
"phase": "width-only-again",
"event": "track",
"component": "EffectDependencyDemo",
"target": "boxWidth",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:53:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:17:33\n at instance.ut (vue-upstream-0ff253b.js:11711:51)\n at updateCssVars (vue-upstream-0ff253b.js:3821:11)\n at Object.process (vue-upstream-0ff253b.js:3657:9)\n at patch (vue-upstream-0ff253b.js:8113:18)\n at patchBlockChildren (vue-upstream-0ff253b.js:8480:9)\n at patchElement (vue-upstream-0ff253b.js:8397:9)\n at processElement (vue-upstream-0ff253b.js:8239:11)\n at patch (vue-upstream-0ff253b.js:8089:13)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8833:11)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "width-only-again",
"event": "track",
"component": "EffectDependencyDemo",
"target": "boxColor",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:53:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:18:33\n at instance.ut (vue-upstream-0ff253b.js:11711:51)\n at updateCssVars (vue-upstream-0ff253b.js:3821:11)\n at Object.process (vue-upstream-0ff253b.js:3657:9)\n at patch (vue-upstream-0ff253b.js:8113:18)\n at patchBlockChildren (vue-upstream-0ff253b.js:8480:9)\n at patchElement (vue-upstream-0ff253b.js:8397:9)\n at processElement (vue-upstream-0ff253b.js:8239:11)\n at patch (vue-upstream-0ff253b.js:8089:13)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8833:11)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "width-only-again",
"event": "track",
"component": "CSS watch",
"target": "boxWidth",
"key": "value",
"stack": "Error\n at effect.<computed> [as onTrack] (eval at evaluate (:370:30), <anonymous>:9:150)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:17:33\n at setVars (vue-upstream-0ff253b.js:11720:20)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at baseWatchOptions.call (vue-upstream-0ff253b.js:3401:49)\n at ReactiveEffect.getter [as fn] (vue-upstream-0ff253b.js:2367:31)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at job (vue-upstream-0ff253b.js:2419:33)\n at flushPostFlushCbs (vue-upstream-0ff253b.js:2902:30)\n at flushJobs (vue-upstream-0ff253b.js:2960:7)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "width-only-again",
"event": "track",
"component": "CSS watch",
"target": "boxColor",
"key": "value",
"stack": "Error\n at effect.<computed> [as onTrack] (eval at evaluate (:370:30), <anonymous>:9:150)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:18:33\n at setVars (vue-upstream-0ff253b.js:11720:20)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at baseWatchOptions.call (vue-upstream-0ff253b.js:3401:49)\n at ReactiveEffect.getter [as fn] (vue-upstream-0ff253b.js:2367:31)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at job (vue-upstream-0ff253b.js:2419:33)\n at flushPostFlushCbs (vue-upstream-0ff253b.js:2902:30)\n at flushJobs (vue-upstream-0ff253b.js:2960:7)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
}
]
},
{
"name": "transition-slot",
"mode": "production",
"input": "<script setup>\nimport { ref, onUpdated, getCurrentInstance } from 'vue'\nconst open = ref(false)\nconst boxWidth = ref('375px')\nconst boxColor = ref('red')\nconst label = ref('before')\nlet ownerUpdates = 0\nonUpdated(() => { ownerUpdates++ })\nwindow.demo = { open, boxWidth, boxColor, label, instance: getCurrentInstance(), getOwnerUpdates: () => ownerUpdates }\nfor (const [name, target] of Object.entries({ open, boxWidth, boxColor, label })) window.targetNames.set(target, name)\n</script>\n<template>\n <div class=\"owner\">\n \n <Teleport to=\"body\">\n <Transition :css=\"false\">\n <div v-if=\"open\" class=\"probe\">{{ label }}</div>\n </Transition>\n </Teleport>\n </div>\n</template>\n<style>.probe { width: v-bind(boxWidth); color: v-bind(boxColor) }</style>",
"compiledScript": "import { useCssVars as _useCssVars, unref as _unref } from 'vue'\nimport { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, Teleport as _Teleport, createBlock as _createBlock } from \"vue\"\n\nconst _hoisted_1 = { class: \"owner\" }\nconst _hoisted_2 = {\n key: 0,\n class: \"probe\"\n}\n\nimport { ref, onUpdated, getCurrentInstance } from 'vue'\n\nexport default {\n __name: 'EffectDependencyDemo',\n setup(__props) {\n\n_useCssVars(_ctx => ({\n \"depdemo-boxWidth\": (boxWidth.value),\n \"depdemo-boxColor\": (boxColor.value)\n}))\n\nconst open = ref(false)\nconst boxWidth = ref('375px')\nconst boxColor = ref('red')\nconst label = ref('before')\nlet ownerUpdates = 0\nonUpdated(() => { ownerUpdates++ })\nwindow.demo = { open, boxWidth, boxColor, label, instance: getCurrentInstance(), getOwnerUpdates: () => ownerUpdates }\nfor (const [name, target] of Object.entries({ open, boxWidth, boxColor, label })) window.targetNames.set(target, name)\n\nreturn (_ctx, _cache) => {\n return (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n (_openBlock(), _createBlock(_Teleport, { to: \"body\" }, [\n _createVNode(_Transition, { css: false }, {\n default: _withCtx(() => [\n (open.value)\n ? (_openBlock(), _createElementBlock(\"div\", _hoisted_2, _toDisplayString(label.value), 1 /* TEXT */))\n : _createCommentVNode(\"v-if\", true)\n ]),\n _: 1 /* STABLE */\n })\n ]))\n ]))\n}\n}\n\n}",
"compiledCss": ".probe { width: var(--depdemo-boxWidth); color: var(--depdemo-boxColor)\n}",
"bundleSha256": "f92677225c1838500915468e4a9d29f2dbaa195428747dc17b49f6a01411679b",
"states": [
{
"phase": "mount",
"ownerUpdates": 0,
"dependencies": {
"open": [
"BaseTransition.render"
],
"boxWidth": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"label": []
},
"ownerRootStyle": "--depdemo-boxWidth: 375px; --depdemo-boxColor: red;",
"element": null
},
{
"phase": "open",
"ownerUpdates": 0,
"dependencies": {
"open": [
"BaseTransition.render"
],
"boxWidth": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 375px; --depdemo-boxColor: red;",
"element": {
"text": "before",
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"style": null
}
},
{
"phase": "text",
"ownerUpdates": 0,
"dependencies": {
"open": [
"BaseTransition.render"
],
"boxWidth": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 375px; --depdemo-boxColor: red;",
"element": {
"text": "after",
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"style": null
}
},
{
"phase": "width-only",
"ownerUpdates": 1,
"dependencies": {
"open": [
"BaseTransition.render"
],
"boxWidth": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 450px; --depdemo-boxColor: red;",
"element": {
"text": "after",
"width": "450px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"style": "--depdemo-boxWidth: 450px; --depdemo-boxColor: red;"
}
},
{
"phase": "close",
"ownerUpdates": 1,
"dependencies": {
"open": [
"BaseTransition.render"
],
"boxWidth": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"label": []
},
"ownerRootStyle": "--depdemo-boxWidth: 450px; --depdemo-boxColor: red;",
"element": null
},
{
"phase": "reopen",
"ownerUpdates": 1,
"dependencies": {
"open": [
"BaseTransition.render"
],
"boxWidth": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 450px; --depdemo-boxColor: red;",
"element": {
"text": "after",
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"style": null
}
},
{
"phase": "width-only-again",
"ownerUpdates": 2,
"dependencies": {
"open": [
"BaseTransition.render"
],
"boxWidth": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 500px; --depdemo-boxColor: red;",
"element": {
"text": "after",
"width": "500px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"style": "--depdemo-boxWidth: 500px; --depdemo-boxColor: red;"
}
}
],
"trace": []
},
{
"name": "transition-slot-teleport-defer",
"mode": "development",
"input": "<script setup>\nimport { ref, onUpdated, getCurrentInstance } from 'vue'\nconst open = ref(false)\nconst boxWidth = ref('375px')\nconst boxColor = ref('red')\nconst label = ref('before')\nlet ownerUpdates = 0\nonUpdated(() => { ownerUpdates++ })\nwindow.demo = { open, boxWidth, boxColor, label, instance: getCurrentInstance(), getOwnerUpdates: () => ownerUpdates }\nfor (const [name, target] of Object.entries({ open, boxWidth, boxColor, label })) window.targetNames.set(target, name)\n</script>\n<template>\n <div class=\"owner\">\n \n <Teleport to=\"body\" defer>\n <Transition :css=\"false\">\n <div v-if=\"open\" class=\"probe\">{{ label }}</div>\n </Transition>\n </Teleport>\n </div>\n</template>\n<style>.probe { width: v-bind(boxWidth); color: v-bind(boxColor) }</style>",
"compiledScript": "import { useCssVars as _useCssVars, unref as _unref } from 'vue'\nimport { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, Teleport as _Teleport, createBlock as _createBlock } from \"vue\"\n\nconst _hoisted_1 = { class: \"owner\" }\nconst _hoisted_2 = {\n key: 0,\n class: \"probe\"\n}\n\nimport { ref, onUpdated, getCurrentInstance } from 'vue'\n\nexport default {\n __name: 'EffectDependencyDemo',\n setup(__props) {\n\n_useCssVars(_ctx => ({\n \"depdemo-boxWidth\": (boxWidth.value),\n \"depdemo-boxColor\": (boxColor.value)\n}))\n\nconst open = ref(false)\nconst boxWidth = ref('375px')\nconst boxColor = ref('red')\nconst label = ref('before')\nlet ownerUpdates = 0\nonUpdated(() => { ownerUpdates++ })\nwindow.demo = { open, boxWidth, boxColor, label, instance: getCurrentInstance(), getOwnerUpdates: () => ownerUpdates }\nfor (const [name, target] of Object.entries({ open, boxWidth, boxColor, label })) window.targetNames.set(target, name)\n\nreturn (_ctx, _cache) => {\n return (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n (_openBlock(), _createBlock(_Teleport, {\n to: \"body\",\n defer: \"\"\n }, [\n _createVNode(_Transition, { css: false }, {\n default: _withCtx(() => [\n (open.value)\n ? (_openBlock(), _createElementBlock(\"div\", _hoisted_2, _toDisplayString(label.value), 1 /* TEXT */))\n : _createCommentVNode(\"v-if\", true)\n ]),\n _: 1 /* STABLE */\n })\n ]))\n ]))\n}\n}\n\n}",
"compiledCss": ".probe { width: var(--depdemo-boxWidth); color: var(--depdemo-boxColor)\n}",
"bundleSha256": "a6d3194b6a18e80af313105454ffe71e67b4da1550db49265cf1a5912afa7cc3",
"states": [
{
"phase": "mount",
"ownerUpdates": 0,
"dependencies": {
"open": [
"BaseTransition.render"
],
"boxWidth": [
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"owner non-render effect (CSS watch in this sample)"
],
"label": []
},
"ownerRootStyle": "--depdemo-boxWidth: 375px; --depdemo-boxColor: red;",
"element": null
},
{
"phase": "open",
"ownerUpdates": 0,
"dependencies": {
"open": [
"BaseTransition.render"
],
"boxWidth": [
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 375px; --depdemo-boxColor: red;",
"element": {
"text": "before",
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"style": null
}
},
{
"phase": "text",
"ownerUpdates": 0,
"dependencies": {
"open": [
"BaseTransition.render"
],
"boxWidth": [
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 375px; --depdemo-boxColor: red;",
"element": {
"text": "after",
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"style": null
}
},
{
"phase": "width-only",
"ownerUpdates": 0,
"dependencies": {
"open": [
"BaseTransition.render"
],
"boxWidth": [
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 450px; --depdemo-boxColor: red;",
"element": {
"text": "after",
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"style": null
}
},
{
"phase": "close",
"ownerUpdates": 0,
"dependencies": {
"open": [
"BaseTransition.render"
],
"boxWidth": [
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"owner non-render effect (CSS watch in this sample)"
],
"label": []
},
"ownerRootStyle": "--depdemo-boxWidth: 450px; --depdemo-boxColor: red;",
"element": null
},
{
"phase": "reopen",
"ownerUpdates": 0,
"dependencies": {
"open": [
"BaseTransition.render"
],
"boxWidth": [
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 450px; --depdemo-boxColor: red;",
"element": {
"text": "after",
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"style": null
}
},
{
"phase": "width-only-again",
"ownerUpdates": 0,
"dependencies": {
"open": [
"BaseTransition.render"
],
"boxWidth": [
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 500px; --depdemo-boxColor: red;",
"element": {
"text": "after",
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"style": null
}
}
],
"trace": [
{
"phase": "mount",
"event": "track",
"component": "BaseTransition",
"target": "open",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:56:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:38:17\n at Proxy.renderFnWithContext (vue-upstream-0ff253b.js:3236:15)\n at Proxy.<anonymous> (vue-upstream-0ff253b.js:3880:81)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8746:48)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at setupRenderEffect (vue-upstream-0ff253b.js:8881:7)\n at mountComponent (vue-upstream-0ff253b.js:8650:9)\n at processComponent (vue-upstream-0ff253b.js:8597:11)\n at patch (vue-upstream-0ff253b.js:8101:13)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8753:13)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at setupRenderEffect (vue-upstream-0ff253b.js:8881:7)\n at mountComponent (vue-upstream-0ff253b.js:8650:9)\n at processComponent (vue-upstream-0ff253b.js:8597:11)\n at patch (vue-upstream-0ff253b.js:8101:13)\n at mountChildren (vue-upstream-0ff253b.js:8352:9)\n at mount (vue-upstream-0ff253b.js:3508:11)\n at mountToTarget (vue-upstream-0ff253b.js:3534:13)\n at mountJob (vue-upstream-0ff253b.js:3550:11)\n at flushPostFlushCbs (vue-upstream-0ff253b.js:2902:30)\n at flushOnAppMount (vue-upstream-0ff253b.js:2920:7)\n at render (vue-upstream-0ff253b.js:9432:7)\n at mount (vue-upstream-0ff253b.js:6872:15)\n at app.mount (vue-upstream-0ff253b.js:13262:21)\n at EffectDependencyDemo.compiled.js:63:12\n at addScriptContent (eval at evaluate (:370:30), <anonymous>:7:25)\n at UtilityScript.evaluate (<anonymous>:372:16)\n at UtilityScript.<anonymous> (<anonymous>:1:44)"
},
{
"phase": "open",
"event": "trigger",
"component": "BaseTransition",
"target": "open",
"key": "value"
},
{
"phase": "open",
"event": "track",
"component": "BaseTransition",
"target": "open",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:56:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:38:17\n at Proxy.renderFnWithContext (vue-upstream-0ff253b.js:3236:15)\n at Proxy.<anonymous> (vue-upstream-0ff253b.js:3880:81)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8824:28)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "open",
"event": "track",
"component": "BaseTransition",
"target": "label",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:56:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:39:92\n at Proxy.renderFnWithContext (vue-upstream-0ff253b.js:3236:15)\n at Proxy.<anonymous> (vue-upstream-0ff253b.js:3880:81)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8824:28)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "text",
"event": "trigger",
"component": "BaseTransition",
"target": "label",
"key": "value"
},
{
"phase": "text",
"event": "track",
"component": "BaseTransition",
"target": "open",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:56:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:38:17\n at Proxy.renderFnWithContext (vue-upstream-0ff253b.js:3236:15)\n at Proxy.<anonymous> (vue-upstream-0ff253b.js:3880:81)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8824:28)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "text",
"event": "track",
"component": "BaseTransition",
"target": "label",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:56:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:39:92\n at Proxy.renderFnWithContext (vue-upstream-0ff253b.js:3236:15)\n at Proxy.<anonymous> (vue-upstream-0ff253b.js:3880:81)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8824:28)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "width-only",
"event": "trigger",
"component": "CSS watch",
"target": "boxWidth",
"key": "value"
},
{
"phase": "width-only",
"event": "track",
"component": "CSS watch",
"target": "boxWidth",
"key": "value",
"stack": "Error\n at effect.<computed> [as onTrack] (eval at evaluate (:370:30), <anonymous>:9:150)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:17:33\n at setVars (vue-upstream-0ff253b.js:11720:20)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at baseWatchOptions.call (vue-upstream-0ff253b.js:3401:49)\n at ReactiveEffect.getter [as fn] (vue-upstream-0ff253b.js:2367:31)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at job (vue-upstream-0ff253b.js:2419:33)\n at flushPostFlushCbs (vue-upstream-0ff253b.js:2902:30)\n at flushJobs (vue-upstream-0ff253b.js:2960:7)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "width-only",
"event": "track",
"component": "CSS watch",
"target": "boxColor",
"key": "value",
"stack": "Error\n at effect.<computed> [as onTrack] (eval at evaluate (:370:30), <anonymous>:9:150)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:18:33\n at setVars (vue-upstream-0ff253b.js:11720:20)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at baseWatchOptions.call (vue-upstream-0ff253b.js:3401:49)\n at ReactiveEffect.getter [as fn] (vue-upstream-0ff253b.js:2367:31)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at job (vue-upstream-0ff253b.js:2419:33)\n at flushPostFlushCbs (vue-upstream-0ff253b.js:2902:30)\n at flushJobs (vue-upstream-0ff253b.js:2960:7)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "close",
"event": "trigger",
"component": "BaseTransition",
"target": "open",
"key": "value"
},
{
"phase": "close",
"event": "track",
"component": "BaseTransition",
"target": "open",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:56:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:38:17\n at Proxy.renderFnWithContext (vue-upstream-0ff253b.js:3236:15)\n at Proxy.<anonymous> (vue-upstream-0ff253b.js:3880:81)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8824:28)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "reopen",
"event": "trigger",
"component": "BaseTransition",
"target": "open",
"key": "value"
},
{
"phase": "reopen",
"event": "track",
"component": "BaseTransition",
"target": "open",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:56:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:38:17\n at Proxy.renderFnWithContext (vue-upstream-0ff253b.js:3236:15)\n at Proxy.<anonymous> (vue-upstream-0ff253b.js:3880:81)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8824:28)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "reopen",
"event": "track",
"component": "BaseTransition",
"target": "label",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:56:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:39:92\n at Proxy.renderFnWithContext (vue-upstream-0ff253b.js:3236:15)\n at Proxy.<anonymous> (vue-upstream-0ff253b.js:3880:81)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8824:28)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "width-only-again",
"event": "trigger",
"component": "CSS watch",
"target": "boxWidth",
"key": "value"
},
{
"phase": "width-only-again",
"event": "track",
"component": "CSS watch",
"target": "boxWidth",
"key": "value",
"stack": "Error\n at effect.<computed> [as onTrack] (eval at evaluate (:370:30), <anonymous>:9:150)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:17:33\n at setVars (vue-upstream-0ff253b.js:11720:20)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at baseWatchOptions.call (vue-upstream-0ff253b.js:3401:49)\n at ReactiveEffect.getter [as fn] (vue-upstream-0ff253b.js:2367:31)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at job (vue-upstream-0ff253b.js:2419:33)\n at flushPostFlushCbs (vue-upstream-0ff253b.js:2902:30)\n at flushJobs (vue-upstream-0ff253b.js:2960:7)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "width-only-again",
"event": "track",
"component": "CSS watch",
"target": "boxColor",
"key": "value",
"stack": "Error\n at effect.<computed> [as onTrack] (eval at evaluate (:370:30), <anonymous>:9:150)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:18:33\n at setVars (vue-upstream-0ff253b.js:11720:20)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at baseWatchOptions.call (vue-upstream-0ff253b.js:3401:49)\n at ReactiveEffect.getter [as fn] (vue-upstream-0ff253b.js:2367:31)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at job (vue-upstream-0ff253b.js:2419:33)\n at flushPostFlushCbs (vue-upstream-0ff253b.js:2902:30)\n at flushJobs (vue-upstream-0ff253b.js:2960:7)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
}
]
},
{
"name": "transition-slot-teleport-defer",
"mode": "production",
"input": "<script setup>\nimport { ref, onUpdated, getCurrentInstance } from 'vue'\nconst open = ref(false)\nconst boxWidth = ref('375px')\nconst boxColor = ref('red')\nconst label = ref('before')\nlet ownerUpdates = 0\nonUpdated(() => { ownerUpdates++ })\nwindow.demo = { open, boxWidth, boxColor, label, instance: getCurrentInstance(), getOwnerUpdates: () => ownerUpdates }\nfor (const [name, target] of Object.entries({ open, boxWidth, boxColor, label })) window.targetNames.set(target, name)\n</script>\n<template>\n <div class=\"owner\">\n \n <Teleport to=\"body\" defer>\n <Transition :css=\"false\">\n <div v-if=\"open\" class=\"probe\">{{ label }}</div>\n </Transition>\n </Teleport>\n </div>\n</template>\n<style>.probe { width: v-bind(boxWidth); color: v-bind(boxColor) }</style>",
"compiledScript": "import { useCssVars as _useCssVars, unref as _unref } from 'vue'\nimport { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, Teleport as _Teleport, createBlock as _createBlock } from \"vue\"\n\nconst _hoisted_1 = { class: \"owner\" }\nconst _hoisted_2 = {\n key: 0,\n class: \"probe\"\n}\n\nimport { ref, onUpdated, getCurrentInstance } from 'vue'\n\nexport default {\n __name: 'EffectDependencyDemo',\n setup(__props) {\n\n_useCssVars(_ctx => ({\n \"depdemo-boxWidth\": (boxWidth.value),\n \"depdemo-boxColor\": (boxColor.value)\n}))\n\nconst open = ref(false)\nconst boxWidth = ref('375px')\nconst boxColor = ref('red')\nconst label = ref('before')\nlet ownerUpdates = 0\nonUpdated(() => { ownerUpdates++ })\nwindow.demo = { open, boxWidth, boxColor, label, instance: getCurrentInstance(), getOwnerUpdates: () => ownerUpdates }\nfor (const [name, target] of Object.entries({ open, boxWidth, boxColor, label })) window.targetNames.set(target, name)\n\nreturn (_ctx, _cache) => {\n return (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n (_openBlock(), _createBlock(_Teleport, {\n to: \"body\",\n defer: \"\"\n }, [\n _createVNode(_Transition, { css: false }, {\n default: _withCtx(() => [\n (open.value)\n ? (_openBlock(), _createElementBlock(\"div\", _hoisted_2, _toDisplayString(label.value), 1 /* TEXT */))\n : _createCommentVNode(\"v-if\", true)\n ]),\n _: 1 /* STABLE */\n })\n ]))\n ]))\n}\n}\n\n}",
"compiledCss": ".probe { width: var(--depdemo-boxWidth); color: var(--depdemo-boxColor)\n}",
"bundleSha256": "f92677225c1838500915468e4a9d29f2dbaa195428747dc17b49f6a01411679b",
"states": [
{
"phase": "mount",
"ownerUpdates": 0,
"dependencies": {
"open": [
"BaseTransition.render"
],
"boxWidth": [
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"owner non-render effect (CSS watch in this sample)"
],
"label": []
},
"ownerRootStyle": "--depdemo-boxWidth: 375px; --depdemo-boxColor: red;",
"element": null
},
{
"phase": "open",
"ownerUpdates": 0,
"dependencies": {
"open": [
"BaseTransition.render"
],
"boxWidth": [
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 375px; --depdemo-boxColor: red;",
"element": {
"text": "before",
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"style": null
}
},
{
"phase": "text",
"ownerUpdates": 0,
"dependencies": {
"open": [
"BaseTransition.render"
],
"boxWidth": [
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 375px; --depdemo-boxColor: red;",
"element": {
"text": "after",
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"style": null
}
},
{
"phase": "width-only",
"ownerUpdates": 0,
"dependencies": {
"open": [
"BaseTransition.render"
],
"boxWidth": [
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 450px; --depdemo-boxColor: red;",
"element": {
"text": "after",
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"style": null
}
},
{
"phase": "close",
"ownerUpdates": 0,
"dependencies": {
"open": [
"BaseTransition.render"
],
"boxWidth": [
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"owner non-render effect (CSS watch in this sample)"
],
"label": []
},
"ownerRootStyle": "--depdemo-boxWidth: 450px; --depdemo-boxColor: red;",
"element": null
},
{
"phase": "reopen",
"ownerUpdates": 0,
"dependencies": {
"open": [
"BaseTransition.render"
],
"boxWidth": [
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 450px; --depdemo-boxColor: red;",
"element": {
"text": "after",
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"style": null
}
},
{
"phase": "width-only-again",
"ownerUpdates": 0,
"dependencies": {
"open": [
"BaseTransition.render"
],
"boxWidth": [
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 500px; --depdemo-boxColor: red;",
"element": {
"text": "after",
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"style": null
}
}
],
"trace": []
},
{
"name": "owner-also-reads-open",
"mode": "development",
"input": "<script setup>\nimport { ref, onUpdated, getCurrentInstance } from 'vue'\nconst open = ref(false)\nconst boxWidth = ref('375px')\nconst boxColor = ref('red')\nconst label = ref('before')\nlet ownerUpdates = 0\nonUpdated(() => { ownerUpdates++ })\nwindow.demo = { open, boxWidth, boxColor, label, instance: getCurrentInstance(), getOwnerUpdates: () => ownerUpdates }\nfor (const [name, target] of Object.entries({ open, boxWidth, boxColor, label })) window.targetNames.set(target, name)\n</script>\n<template>\n <div class=\"owner\">\n <p>{{ open }}</p>\n <Teleport to=\"body\">\n <Transition :css=\"false\">\n <div v-if=\"open\" class=\"probe\">{{ label }}</div>\n </Transition>\n </Teleport>\n </div>\n</template>\n<style>.probe { width: v-bind(boxWidth); color: v-bind(boxColor) }</style>",
"compiledScript": "import { useCssVars as _useCssVars, unref as _unref } from 'vue'\nimport { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, Teleport as _Teleport, createBlock as _createBlock } from \"vue\"\n\nconst _hoisted_1 = { class: \"owner\" }\nconst _hoisted_2 = {\n key: 0,\n class: \"probe\"\n}\n\nimport { ref, onUpdated, getCurrentInstance } from 'vue'\n\nexport default {\n __name: 'EffectDependencyDemo',\n setup(__props) {\n\n_useCssVars(_ctx => ({\n \"depdemo-boxWidth\": (boxWidth.value),\n \"depdemo-boxColor\": (boxColor.value)\n}))\n\nconst open = ref(false)\nconst boxWidth = ref('375px')\nconst boxColor = ref('red')\nconst label = ref('before')\nlet ownerUpdates = 0\nonUpdated(() => { ownerUpdates++ })\nwindow.demo = { open, boxWidth, boxColor, label, instance: getCurrentInstance(), getOwnerUpdates: () => ownerUpdates }\nfor (const [name, target] of Object.entries({ open, boxWidth, boxColor, label })) window.targetNames.set(target, name)\n\nreturn (_ctx, _cache) => {\n return (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n _createElementVNode(\"p\", null, _toDisplayString(open.value), 1 /* TEXT */),\n (_openBlock(), _createBlock(_Teleport, { to: \"body\" }, [\n _createVNode(_Transition, { css: false }, {\n default: _withCtx(() => [\n (open.value)\n ? (_openBlock(), _createElementBlock(\"div\", _hoisted_2, _toDisplayString(label.value), 1 /* TEXT */))\n : _createCommentVNode(\"v-if\", true)\n ]),\n _: 1 /* STABLE */\n })\n ]))\n ]))\n}\n}\n\n}",
"compiledCss": ".probe { width: var(--depdemo-boxWidth); color: var(--depdemo-boxColor)\n}",
"bundleSha256": "a6d3194b6a18e80af313105454ffe71e67b4da1550db49265cf1a5912afa7cc3",
"states": [
{
"phase": "mount",
"ownerUpdates": 0,
"dependencies": {
"open": [
"BaseTransition.render",
"EffectDependencyDemo.render"
],
"boxWidth": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"label": []
},
"ownerRootStyle": "--depdemo-boxWidth: 375px; --depdemo-boxColor: red;",
"element": null
},
{
"phase": "open",
"ownerUpdates": 1,
"dependencies": {
"open": [
"BaseTransition.render",
"EffectDependencyDemo.render"
],
"boxWidth": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 375px; --depdemo-boxColor: red;",
"element": {
"text": "before",
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"style": null
}
},
{
"phase": "text",
"ownerUpdates": 1,
"dependencies": {
"open": [
"BaseTransition.render",
"EffectDependencyDemo.render"
],
"boxWidth": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 375px; --depdemo-boxColor: red;",
"element": {
"text": "after",
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"style": null
}
},
{
"phase": "width-only",
"ownerUpdates": 2,
"dependencies": {
"open": [
"BaseTransition.render",
"EffectDependencyDemo.render"
],
"boxWidth": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 450px; --depdemo-boxColor: red;",
"element": {
"text": "after",
"width": "450px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"style": "--depdemo-boxWidth: 450px; --depdemo-boxColor: red;"
}
},
{
"phase": "close",
"ownerUpdates": 3,
"dependencies": {
"open": [
"BaseTransition.render",
"EffectDependencyDemo.render"
],
"boxWidth": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"label": []
},
"ownerRootStyle": "--depdemo-boxWidth: 450px; --depdemo-boxColor: red;",
"element": null
},
{
"phase": "reopen",
"ownerUpdates": 4,
"dependencies": {
"open": [
"BaseTransition.render",
"EffectDependencyDemo.render"
],
"boxWidth": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 450px; --depdemo-boxColor: red;",
"element": {
"text": "after",
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"style": null
}
},
{
"phase": "width-only-again",
"ownerUpdates": 5,
"dependencies": {
"open": [
"BaseTransition.render",
"EffectDependencyDemo.render"
],
"boxWidth": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 500px; --depdemo-boxColor: red;",
"element": {
"text": "after",
"width": "500px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"style": "--depdemo-boxWidth: 500px; --depdemo-boxColor: red;"
}
}
],
"trace": [
{
"phase": "mount",
"event": "track",
"component": "EffectDependencyDemo",
"target": "open",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:54:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at Proxy.<anonymous> (EffectDependencyDemo.compiled.js:32:58)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8746:48)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at setupRenderEffect (vue-upstream-0ff253b.js:8881:7)\n at mountComponent (vue-upstream-0ff253b.js:8650:9)\n at processComponent (vue-upstream-0ff253b.js:8597:11)\n at patch (vue-upstream-0ff253b.js:8101:13)\n at vue-upstream-0ff253b.js:9438:11\n at flushOnAppMount (vue-upstream-0ff253b.js:2916:5)\n at render (vue-upstream-0ff253b.js:9432:7)\n at mount (vue-upstream-0ff253b.js:6872:15)\n at app.mount (vue-upstream-0ff253b.js:13262:21)\n at EffectDependencyDemo.compiled.js:61:12\n at addScriptContent (eval at evaluate (:370:30), <anonymous>:7:25)\n at UtilityScript.evaluate (<anonymous>:372:16)\n at UtilityScript.<anonymous> (<anonymous>:1:44)"
},
{
"phase": "mount",
"event": "track",
"component": "BaseTransition",
"target": "open",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:54:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:36:17\n at Proxy.renderFnWithContext (vue-upstream-0ff253b.js:3236:15)\n at Proxy.<anonymous> (vue-upstream-0ff253b.js:3880:81)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8746:48)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at setupRenderEffect (vue-upstream-0ff253b.js:8881:7)\n at mountComponent (vue-upstream-0ff253b.js:8650:9)\n at processComponent (vue-upstream-0ff253b.js:8597:11)\n at patch (vue-upstream-0ff253b.js:8101:13)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8753:13)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at setupRenderEffect (vue-upstream-0ff253b.js:8881:7)\n at mountComponent (vue-upstream-0ff253b.js:8650:9)\n at processComponent (vue-upstream-0ff253b.js:8597:11)\n at patch (vue-upstream-0ff253b.js:8101:13)\n at mountChildren (vue-upstream-0ff253b.js:8352:9)\n at mount (vue-upstream-0ff253b.js:3508:11)\n at mountToTarget (vue-upstream-0ff253b.js:3534:13)\n at Object.process (vue-upstream-0ff253b.js:3568:9)\n at patch (vue-upstream-0ff253b.js:8113:18)\n at mountChildren (vue-upstream-0ff253b.js:8352:9)\n at mountElement (vue-upstream-0ff253b.js:8268:9)\n at processElement (vue-upstream-0ff253b.js:8223:9)\n at patch (vue-upstream-0ff253b.js:8089:13)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8753:13)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at setupRenderEffect (vue-upstream-0ff253b.js:8881:7)\n at mountComponent (vue-upstream-0ff253b.js:8650:9)\n at processComponent (vue-upstream-0ff253b.js:8597:11)\n at patch (vue-upstream-0ff253b.js:8101:13)\n at vue-upstream-0ff253b.js:9438:11\n at flushOnAppMount (vue-upstream-0ff253b.js:2916:5)\n at render (vue-upstream-0ff253b.js:9432:7)\n at mount (vue-upstream-0ff253b.js:6872:15)\n at app.mount (vue-upstream-0ff253b.js:13262:21)\n at EffectDependencyDemo.compiled.js:61:12\n at addScriptContent (eval at evaluate (:370:30), <anonymous>:7:25)\n at UtilityScript.evaluate (<anonymous>:372:16)\n at UtilityScript.<anonymous> (<anonymous>:1:44)"
},
{
"phase": "mount",
"event": "track",
"component": "EffectDependencyDemo",
"target": "boxWidth",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:54:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:17:33\n at instance.ut (vue-upstream-0ff253b.js:11711:51)\n at updateCssVars (vue-upstream-0ff253b.js:3821:11)\n at mountToTarget (vue-upstream-0ff253b.js:3535:13)\n at Object.process (vue-upstream-0ff253b.js:3568:9)\n at patch (vue-upstream-0ff253b.js:8113:18)\n at mountChildren (vue-upstream-0ff253b.js:8352:9)\n at mountElement (vue-upstream-0ff253b.js:8268:9)\n at processElement (vue-upstream-0ff253b.js:8223:9)\n at patch (vue-upstream-0ff253b.js:8089:13)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8753:13)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at setupRenderEffect (vue-upstream-0ff253b.js:8881:7)\n at mountComponent (vue-upstream-0ff253b.js:8650:9)\n at processComponent (vue-upstream-0ff253b.js:8597:11)\n at patch (vue-upstream-0ff253b.js:8101:13)\n at vue-upstream-0ff253b.js:9438:11\n at flushOnAppMount (vue-upstream-0ff253b.js:2916:5)\n at render (vue-upstream-0ff253b.js:9432:7)\n at mount (vue-upstream-0ff253b.js:6872:15)\n at app.mount (vue-upstream-0ff253b.js:13262:21)\n at EffectDependencyDemo.compiled.js:61:12\n at addScriptContent (eval at evaluate (:370:30), <anonymous>:7:25)\n at UtilityScript.evaluate (<anonymous>:372:16)\n at UtilityScript.<anonymous> (<anonymous>:1:44)"
},
{
"phase": "mount",
"event": "track",
"component": "EffectDependencyDemo",
"target": "boxColor",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:54:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:18:33\n at instance.ut (vue-upstream-0ff253b.js:11711:51)\n at updateCssVars (vue-upstream-0ff253b.js:3821:11)\n at mountToTarget (vue-upstream-0ff253b.js:3535:13)\n at Object.process (vue-upstream-0ff253b.js:3568:9)\n at patch (vue-upstream-0ff253b.js:8113:18)\n at mountChildren (vue-upstream-0ff253b.js:8352:9)\n at mountElement (vue-upstream-0ff253b.js:8268:9)\n at processElement (vue-upstream-0ff253b.js:8223:9)\n at patch (vue-upstream-0ff253b.js:8089:13)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8753:13)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at setupRenderEffect (vue-upstream-0ff253b.js:8881:7)\n at mountComponent (vue-upstream-0ff253b.js:8650:9)\n at processComponent (vue-upstream-0ff253b.js:8597:11)\n at patch (vue-upstream-0ff253b.js:8101:13)\n at vue-upstream-0ff253b.js:9438:11\n at flushOnAppMount (vue-upstream-0ff253b.js:2916:5)\n at render (vue-upstream-0ff253b.js:9432:7)\n at mount (vue-upstream-0ff253b.js:6872:15)\n at app.mount (vue-upstream-0ff253b.js:13262:21)\n at EffectDependencyDemo.compiled.js:61:12\n at addScriptContent (eval at evaluate (:370:30), <anonymous>:7:25)\n at UtilityScript.evaluate (<anonymous>:372:16)\n at UtilityScript.<anonymous> (<anonymous>:1:44)"
},
{
"phase": "open",
"event": "trigger",
"component": "EffectDependencyDemo",
"target": "open",
"key": "value"
},
{
"phase": "open",
"event": "trigger",
"component": "BaseTransition",
"target": "open",
"key": "value"
},
{
"phase": "open",
"event": "track",
"component": "EffectDependencyDemo",
"target": "open",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:54:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at Proxy.<anonymous> (EffectDependencyDemo.compiled.js:32:58)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8824:28)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "open",
"event": "track",
"component": "EffectDependencyDemo",
"target": "boxWidth",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:54:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:17:33\n at instance.ut (vue-upstream-0ff253b.js:11711:51)\n at updateCssVars (vue-upstream-0ff253b.js:3821:11)\n at Object.process (vue-upstream-0ff253b.js:3657:9)\n at patch (vue-upstream-0ff253b.js:8113:18)\n at patchBlockChildren (vue-upstream-0ff253b.js:8480:9)\n at patchElement (vue-upstream-0ff253b.js:8397:9)\n at processElement (vue-upstream-0ff253b.js:8239:11)\n at patch (vue-upstream-0ff253b.js:8089:13)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8833:11)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "open",
"event": "track",
"component": "EffectDependencyDemo",
"target": "boxColor",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:54:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:18:33\n at instance.ut (vue-upstream-0ff253b.js:11711:51)\n at updateCssVars (vue-upstream-0ff253b.js:3821:11)\n at Object.process (vue-upstream-0ff253b.js:3657:9)\n at patch (vue-upstream-0ff253b.js:8113:18)\n at patchBlockChildren (vue-upstream-0ff253b.js:8480:9)\n at patchElement (vue-upstream-0ff253b.js:8397:9)\n at processElement (vue-upstream-0ff253b.js:8239:11)\n at patch (vue-upstream-0ff253b.js:8089:13)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8833:11)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "open",
"event": "track",
"component": "BaseTransition",
"target": "open",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:54:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:36:17\n at Proxy.renderFnWithContext (vue-upstream-0ff253b.js:3236:15)\n at Proxy.<anonymous> (vue-upstream-0ff253b.js:3880:81)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8824:28)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "open",
"event": "track",
"component": "BaseTransition",
"target": "label",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:54:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:37:92\n at Proxy.renderFnWithContext (vue-upstream-0ff253b.js:3236:15)\n at Proxy.<anonymous> (vue-upstream-0ff253b.js:3880:81)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8824:28)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "text",
"event": "trigger",
"component": "BaseTransition",
"target": "label",
"key": "value"
},
{
"phase": "text",
"event": "track",
"component": "BaseTransition",
"target": "open",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:54:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:36:17\n at Proxy.renderFnWithContext (vue-upstream-0ff253b.js:3236:15)\n at Proxy.<anonymous> (vue-upstream-0ff253b.js:3880:81)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8824:28)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "text",
"event": "track",
"component": "BaseTransition",
"target": "label",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:54:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:37:92\n at Proxy.renderFnWithContext (vue-upstream-0ff253b.js:3236:15)\n at Proxy.<anonymous> (vue-upstream-0ff253b.js:3880:81)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8824:28)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "width-only",
"event": "trigger",
"component": "EffectDependencyDemo",
"target": "boxWidth",
"key": "value"
},
{
"phase": "width-only",
"event": "trigger",
"component": "CSS watch",
"target": "boxWidth",
"key": "value"
},
{
"phase": "width-only",
"event": "track",
"component": "EffectDependencyDemo",
"target": "open",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:54:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at Proxy.<anonymous> (EffectDependencyDemo.compiled.js:32:58)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8824:28)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "width-only",
"event": "track",
"component": "EffectDependencyDemo",
"target": "boxWidth",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:54:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:17:33\n at instance.ut (vue-upstream-0ff253b.js:11711:51)\n at updateCssVars (vue-upstream-0ff253b.js:3821:11)\n at Object.process (vue-upstream-0ff253b.js:3657:9)\n at patch (vue-upstream-0ff253b.js:8113:18)\n at patchBlockChildren (vue-upstream-0ff253b.js:8480:9)\n at patchElement (vue-upstream-0ff253b.js:8397:9)\n at processElement (vue-upstream-0ff253b.js:8239:11)\n at patch (vue-upstream-0ff253b.js:8089:13)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8833:11)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "width-only",
"event": "track",
"component": "EffectDependencyDemo",
"target": "boxColor",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:54:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:18:33\n at instance.ut (vue-upstream-0ff253b.js:11711:51)\n at updateCssVars (vue-upstream-0ff253b.js:3821:11)\n at Object.process (vue-upstream-0ff253b.js:3657:9)\n at patch (vue-upstream-0ff253b.js:8113:18)\n at patchBlockChildren (vue-upstream-0ff253b.js:8480:9)\n at patchElement (vue-upstream-0ff253b.js:8397:9)\n at processElement (vue-upstream-0ff253b.js:8239:11)\n at patch (vue-upstream-0ff253b.js:8089:13)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8833:11)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "width-only",
"event": "track",
"component": "CSS watch",
"target": "boxWidth",
"key": "value",
"stack": "Error\n at effect.<computed> [as onTrack] (eval at evaluate (:370:30), <anonymous>:9:150)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:17:33\n at setVars (vue-upstream-0ff253b.js:11720:20)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at baseWatchOptions.call (vue-upstream-0ff253b.js:3401:49)\n at ReactiveEffect.getter [as fn] (vue-upstream-0ff253b.js:2367:31)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at job (vue-upstream-0ff253b.js:2419:33)\n at flushPostFlushCbs (vue-upstream-0ff253b.js:2902:30)\n at flushJobs (vue-upstream-0ff253b.js:2960:7)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "width-only",
"event": "track",
"component": "CSS watch",
"target": "boxColor",
"key": "value",
"stack": "Error\n at effect.<computed> [as onTrack] (eval at evaluate (:370:30), <anonymous>:9:150)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:18:33\n at setVars (vue-upstream-0ff253b.js:11720:20)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at baseWatchOptions.call (vue-upstream-0ff253b.js:3401:49)\n at ReactiveEffect.getter [as fn] (vue-upstream-0ff253b.js:2367:31)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at job (vue-upstream-0ff253b.js:2419:33)\n at flushPostFlushCbs (vue-upstream-0ff253b.js:2902:30)\n at flushJobs (vue-upstream-0ff253b.js:2960:7)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "close",
"event": "trigger",
"component": "EffectDependencyDemo",
"target": "open",
"key": "value"
},
{
"phase": "close",
"event": "trigger",
"component": "BaseTransition",
"target": "open",
"key": "value"
},
{
"phase": "close",
"event": "track",
"component": "EffectDependencyDemo",
"target": "open",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:54:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at Proxy.<anonymous> (EffectDependencyDemo.compiled.js:32:58)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8824:28)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "close",
"event": "track",
"component": "EffectDependencyDemo",
"target": "boxWidth",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:54:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:17:33\n at instance.ut (vue-upstream-0ff253b.js:11711:51)\n at updateCssVars (vue-upstream-0ff253b.js:3821:11)\n at Object.process (vue-upstream-0ff253b.js:3657:9)\n at patch (vue-upstream-0ff253b.js:8113:18)\n at patchBlockChildren (vue-upstream-0ff253b.js:8480:9)\n at patchElement (vue-upstream-0ff253b.js:8397:9)\n at processElement (vue-upstream-0ff253b.js:8239:11)\n at patch (vue-upstream-0ff253b.js:8089:13)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8833:11)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "close",
"event": "track",
"component": "EffectDependencyDemo",
"target": "boxColor",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:54:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:18:33\n at instance.ut (vue-upstream-0ff253b.js:11711:51)\n at updateCssVars (vue-upstream-0ff253b.js:3821:11)\n at Object.process (vue-upstream-0ff253b.js:3657:9)\n at patch (vue-upstream-0ff253b.js:8113:18)\n at patchBlockChildren (vue-upstream-0ff253b.js:8480:9)\n at patchElement (vue-upstream-0ff253b.js:8397:9)\n at processElement (vue-upstream-0ff253b.js:8239:11)\n at patch (vue-upstream-0ff253b.js:8089:13)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8833:11)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "close",
"event": "track",
"component": "BaseTransition",
"target": "open",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:54:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:36:17\n at Proxy.renderFnWithContext (vue-upstream-0ff253b.js:3236:15)\n at Proxy.<anonymous> (vue-upstream-0ff253b.js:3880:81)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8824:28)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "reopen",
"event": "trigger",
"component": "EffectDependencyDemo",
"target": "open",
"key": "value"
},
{
"phase": "reopen",
"event": "trigger",
"component": "BaseTransition",
"target": "open",
"key": "value"
},
{
"phase": "reopen",
"event": "track",
"component": "EffectDependencyDemo",
"target": "open",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:54:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at Proxy.<anonymous> (EffectDependencyDemo.compiled.js:32:58)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8824:28)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "reopen",
"event": "track",
"component": "EffectDependencyDemo",
"target": "boxWidth",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:54:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:17:33\n at instance.ut (vue-upstream-0ff253b.js:11711:51)\n at updateCssVars (vue-upstream-0ff253b.js:3821:11)\n at Object.process (vue-upstream-0ff253b.js:3657:9)\n at patch (vue-upstream-0ff253b.js:8113:18)\n at patchBlockChildren (vue-upstream-0ff253b.js:8480:9)\n at patchElement (vue-upstream-0ff253b.js:8397:9)\n at processElement (vue-upstream-0ff253b.js:8239:11)\n at patch (vue-upstream-0ff253b.js:8089:13)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8833:11)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "reopen",
"event": "track",
"component": "EffectDependencyDemo",
"target": "boxColor",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:54:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:18:33\n at instance.ut (vue-upstream-0ff253b.js:11711:51)\n at updateCssVars (vue-upstream-0ff253b.js:3821:11)\n at Object.process (vue-upstream-0ff253b.js:3657:9)\n at patch (vue-upstream-0ff253b.js:8113:18)\n at patchBlockChildren (vue-upstream-0ff253b.js:8480:9)\n at patchElement (vue-upstream-0ff253b.js:8397:9)\n at processElement (vue-upstream-0ff253b.js:8239:11)\n at patch (vue-upstream-0ff253b.js:8089:13)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8833:11)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "reopen",
"event": "track",
"component": "BaseTransition",
"target": "open",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:54:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:36:17\n at Proxy.renderFnWithContext (vue-upstream-0ff253b.js:3236:15)\n at Proxy.<anonymous> (vue-upstream-0ff253b.js:3880:81)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8824:28)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "reopen",
"event": "track",
"component": "BaseTransition",
"target": "label",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:54:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:37:92\n at Proxy.renderFnWithContext (vue-upstream-0ff253b.js:3236:15)\n at Proxy.<anonymous> (vue-upstream-0ff253b.js:3880:81)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8824:28)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "width-only-again",
"event": "trigger",
"component": "EffectDependencyDemo",
"target": "boxWidth",
"key": "value"
},
{
"phase": "width-only-again",
"event": "trigger",
"component": "CSS watch",
"target": "boxWidth",
"key": "value"
},
{
"phase": "width-only-again",
"event": "track",
"component": "EffectDependencyDemo",
"target": "open",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:54:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at Proxy.<anonymous> (EffectDependencyDemo.compiled.js:32:58)\n at renderComponentRoot (vue-upstream-0ff253b.js:7198:18)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8824:28)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "width-only-again",
"event": "track",
"component": "EffectDependencyDemo",
"target": "boxWidth",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:54:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:17:33\n at instance.ut (vue-upstream-0ff253b.js:11711:51)\n at updateCssVars (vue-upstream-0ff253b.js:3821:11)\n at Object.process (vue-upstream-0ff253b.js:3657:9)\n at patch (vue-upstream-0ff253b.js:8113:18)\n at patchBlockChildren (vue-upstream-0ff253b.js:8480:9)\n at patchElement (vue-upstream-0ff253b.js:8397:9)\n at processElement (vue-upstream-0ff253b.js:8239:11)\n at patch (vue-upstream-0ff253b.js:8089:13)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8833:11)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "width-only-again",
"event": "track",
"component": "EffectDependencyDemo",
"target": "boxColor",
"key": "value",
"stack": "Error\n at Proxy.renderTracked (EffectDependencyDemo.compiled.js:54:124)\n at vue-upstream-0ff253b.js:5687:42\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:21)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at hook.__weh.hook.__weh (vue-upstream-0ff253b.js:5667:21)\n at invokeArrayFns (vue-upstream-0ff253b.js:88:13)\n at effect.onTrack (vue-upstream-0ff253b.js:8878:48)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:18:33\n at instance.ut (vue-upstream-0ff253b.js:11711:51)\n at updateCssVars (vue-upstream-0ff253b.js:3821:11)\n at Object.process (vue-upstream-0ff253b.js:3657:9)\n at patch (vue-upstream-0ff253b.js:8113:18)\n at patchBlockChildren (vue-upstream-0ff253b.js:8480:9)\n at patchElement (vue-upstream-0ff253b.js:8397:9)\n at processElement (vue-upstream-0ff253b.js:8239:11)\n at patch (vue-upstream-0ff253b.js:8089:13)\n at ReactiveEffect.componentUpdateFn [as fn] (vue-upstream-0ff253b.js:8833:11)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at ReactiveEffect.runIfDirty (vue-upstream-0ff253b.js:755:14)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at flushJobs (vue-upstream-0ff253b.js:2941:11)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "width-only-again",
"event": "track",
"component": "CSS watch",
"target": "boxWidth",
"key": "value",
"stack": "Error\n at effect.<computed> [as onTrack] (eval at evaluate (:370:30), <anonymous>:9:150)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:17:33\n at setVars (vue-upstream-0ff253b.js:11720:20)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at baseWatchOptions.call (vue-upstream-0ff253b.js:3401:49)\n at ReactiveEffect.getter [as fn] (vue-upstream-0ff253b.js:2367:31)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at job (vue-upstream-0ff253b.js:2419:33)\n at flushPostFlushCbs (vue-upstream-0ff253b.js:2902:30)\n at flushJobs (vue-upstream-0ff253b.js:2960:7)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
},
{
"phase": "width-only-again",
"event": "track",
"component": "CSS watch",
"target": "boxColor",
"key": "value",
"stack": "Error\n at effect.<computed> [as onTrack] (eval at evaluate (:370:30), <anonymous>:9:150)\n at Dep.track (vue-upstream-0ff253b.js:1064:19)\n at get value (vue-upstream-0ff253b.js:2021:18)\n at EffectDependencyDemo.compiled.js:18:33\n at setVars (vue-upstream-0ff253b.js:11720:20)\n at callWithErrorHandling (vue-upstream-0ff253b.js:2705:35)\n at callWithAsyncErrorHandling (vue-upstream-0ff253b.js:2712:19)\n at baseWatchOptions.call (vue-upstream-0ff253b.js:3401:49)\n at ReactiveEffect.getter [as fn] (vue-upstream-0ff253b.js:2367:31)\n at ReactiveEffect.run (vue-upstream-0ff253b.js:717:21)\n at job (vue-upstream-0ff253b.js:2419:33)\n at flushPostFlushCbs (vue-upstream-0ff253b.js:2902:30)\n at flushJobs (vue-upstream-0ff253b.js:2960:7)\n at async eval (eval at evaluate (:370:30), <anonymous>:1:94)\n at async <anonymous>:396:30"
}
]
},
{
"name": "owner-also-reads-open",
"mode": "production",
"input": "<script setup>\nimport { ref, onUpdated, getCurrentInstance } from 'vue'\nconst open = ref(false)\nconst boxWidth = ref('375px')\nconst boxColor = ref('red')\nconst label = ref('before')\nlet ownerUpdates = 0\nonUpdated(() => { ownerUpdates++ })\nwindow.demo = { open, boxWidth, boxColor, label, instance: getCurrentInstance(), getOwnerUpdates: () => ownerUpdates }\nfor (const [name, target] of Object.entries({ open, boxWidth, boxColor, label })) window.targetNames.set(target, name)\n</script>\n<template>\n <div class=\"owner\">\n <p>{{ open }}</p>\n <Teleport to=\"body\">\n <Transition :css=\"false\">\n <div v-if=\"open\" class=\"probe\">{{ label }}</div>\n </Transition>\n </Teleport>\n </div>\n</template>\n<style>.probe { width: v-bind(boxWidth); color: v-bind(boxColor) }</style>",
"compiledScript": "import { useCssVars as _useCssVars, unref as _unref } from 'vue'\nimport { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, Teleport as _Teleport, createBlock as _createBlock } from \"vue\"\n\nconst _hoisted_1 = { class: \"owner\" }\nconst _hoisted_2 = {\n key: 0,\n class: \"probe\"\n}\n\nimport { ref, onUpdated, getCurrentInstance } from 'vue'\n\nexport default {\n __name: 'EffectDependencyDemo',\n setup(__props) {\n\n_useCssVars(_ctx => ({\n \"depdemo-boxWidth\": (boxWidth.value),\n \"depdemo-boxColor\": (boxColor.value)\n}))\n\nconst open = ref(false)\nconst boxWidth = ref('375px')\nconst boxColor = ref('red')\nconst label = ref('before')\nlet ownerUpdates = 0\nonUpdated(() => { ownerUpdates++ })\nwindow.demo = { open, boxWidth, boxColor, label, instance: getCurrentInstance(), getOwnerUpdates: () => ownerUpdates }\nfor (const [name, target] of Object.entries({ open, boxWidth, boxColor, label })) window.targetNames.set(target, name)\n\nreturn (_ctx, _cache) => {\n return (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n _createElementVNode(\"p\", null, _toDisplayString(open.value), 1 /* TEXT */),\n (_openBlock(), _createBlock(_Teleport, { to: \"body\" }, [\n _createVNode(_Transition, { css: false }, {\n default: _withCtx(() => [\n (open.value)\n ? (_openBlock(), _createElementBlock(\"div\", _hoisted_2, _toDisplayString(label.value), 1 /* TEXT */))\n : _createCommentVNode(\"v-if\", true)\n ]),\n _: 1 /* STABLE */\n })\n ]))\n ]))\n}\n}\n\n}",
"compiledCss": ".probe { width: var(--depdemo-boxWidth); color: var(--depdemo-boxColor)\n}",
"bundleSha256": "f92677225c1838500915468e4a9d29f2dbaa195428747dc17b49f6a01411679b",
"states": [
{
"phase": "mount",
"ownerUpdates": 0,
"dependencies": {
"open": [
"BaseTransition.render",
"EffectDependencyDemo.render"
],
"boxWidth": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"label": []
},
"ownerRootStyle": "--depdemo-boxWidth: 375px; --depdemo-boxColor: red;",
"element": null
},
{
"phase": "open",
"ownerUpdates": 1,
"dependencies": {
"open": [
"BaseTransition.render",
"EffectDependencyDemo.render"
],
"boxWidth": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 375px; --depdemo-boxColor: red;",
"element": {
"text": "before",
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"style": null
}
},
{
"phase": "text",
"ownerUpdates": 1,
"dependencies": {
"open": [
"BaseTransition.render",
"EffectDependencyDemo.render"
],
"boxWidth": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 375px; --depdemo-boxColor: red;",
"element": {
"text": "after",
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"style": null
}
},
{
"phase": "width-only",
"ownerUpdates": 2,
"dependencies": {
"open": [
"BaseTransition.render",
"EffectDependencyDemo.render"
],
"boxWidth": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 450px; --depdemo-boxColor: red;",
"element": {
"text": "after",
"width": "450px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"style": "--depdemo-boxWidth: 450px; --depdemo-boxColor: red;"
}
},
{
"phase": "close",
"ownerUpdates": 3,
"dependencies": {
"open": [
"BaseTransition.render",
"EffectDependencyDemo.render"
],
"boxWidth": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"label": []
},
"ownerRootStyle": "--depdemo-boxWidth: 450px; --depdemo-boxColor: red;",
"element": null
},
{
"phase": "reopen",
"ownerUpdates": 4,
"dependencies": {
"open": [
"BaseTransition.render",
"EffectDependencyDemo.render"
],
"boxWidth": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 450px; --depdemo-boxColor: red;",
"element": {
"text": "after",
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"style": null
}
},
{
"phase": "width-only-again",
"ownerUpdates": 5,
"dependencies": {
"open": [
"BaseTransition.render",
"EffectDependencyDemo.render"
],
"boxWidth": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"boxColor": [
"EffectDependencyDemo.render",
"owner non-render effect (CSS watch in this sample)"
],
"label": [
"BaseTransition.render"
]
},
"ownerRootStyle": "--depdemo-boxWidth: 500px; --depdemo-boxColor: red;",
"element": {
"text": "after",
"width": "500px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"style": "--depdemo-boxWidth: 500px; --depdemo-boxColor: red;"
}
}
],
"trace": []
}
]
}恢复不代表首次打开已经正确。再次关闭、重开会生成新节点；复现应先检查新节点刚插入时的 owner、变量与布局，再单独检查源值改变后的行为。候选补丁把检查放在内部组件更新后，正是为了在根替换完成之后补标记和回填，而不依赖一次偶然的后续外层更新。
上游 issue、旧 PR 与遗漏场景
官方 issue 的状态
Vue 这边已经有对应 issue：vuejs/core#7312 的标题就是 v-bind style not working in some edge cases (teleport + transition, slots)。截至 2026-10-24，这个 issue 仍然是 open，标签里包含 bug、scope: teleport 和 has workaround。
这个问题和更早的 vuejs/core#4605 有关系。#4605 说的是 Teleport 中 CSS v-bind() 失效，后来由提交 42239cf 修掉。这个提交做的事正是上面那套 owner 标记机制：Teleport 更新时给 target 节点写 data-v-owner，useCssVars() 再通过这个 owner 找回传送出去的 DOM。
问题是 #4605 修的是普通 Teleport 路径。#7312 下面有维护者评论指出，新的边界和 Teleport 没有走到某些 patch 路径有关。换成源码语言就是：后插入的 DOM 进入了 Transition / renderer 的插入路径，但 Teleport 自己的 updateCssVars() 没有在那个时机重新跑，所以新节点没有 owner 标记。
Vue 3.5.44 的 useCssVars.spec.ts 已经覆盖了 with teleport、with teleport in child slot、with teleport(change subTree)、with teleport(disabled)，但没有覆盖 Teleport + Transition + v-if。已有用例守住了普通路径，还缺少内部组件独立替换根节点的回归检查。
两个旧 PR 为什么还没合并
#7344 和 #7364 都在 2022 年提出，截至这次查询仍然 open、未合并。公开讨论能确认的阻力不同。
#7344 最终方案通过 VNode 上的 Teleport 标识和 renderer 挂载路径传递上下文，并新增导出的 teleportUTMap。2024 年的生态 CI 反馈指出，新增 runtime-core 导出需要放进 minor release；Nuxt 当时的失败与这个导出有关，评论明确写了「Not a blocker」。早期版本被质疑过遍历和观察器的开销，但方案后来改过，不能把早期意见当成最终版本未合并的完整原因。公开记录没有给出最终定论。
#7364 的方案会给 Teleport target 加 MutationObserver，target 为 body 时会监听 body 的直接子节点变化。维护者在 2024 年明确反对观察 body 带来的开销。这里没有开启 subtree，不能说整个页面的所有深层 DOM 变化都会触发；但无关的 body 直接子节点增删也会进入它的更新路径。
另外，#14594 虽然修过类似的 Teleport CSS 变量问题，改动位于 runtime-vapor，不覆盖本文使用的 VDOM runtime。
复测 #7344 评论里的遗漏场景
这次取出评论中 Playground 链接压缩保存的原始 SFC，使用当前 compiler-sfc 编译，再分别加载上游和本地补丁的 runtime。切换时等待过渡结束、确认节点真正移除，避免把仍在离场的旧节点当成重建结果。
| 原始评论用例 | 上游 3.5.44 实现 | 本地候选补丁 |
|---|---|---|
| 2022-12-14 的五分支对照：初始显示，关闭后重开 | 直接组合 Teleport + Transition 的分支丢色，其他四个分支正常 | 五个分支反复切换均保持红色 |
| 2022-12-16 的初始隐藏用例 | 第一次打开即丢色 | 首次打开和反复切换均保持红色 |
第一例使用普通 <style>，也证明问题不只涉及 scoped 选择器。原始 Playground 链接、来源和逐轮结果保存在下方的复测数据中。
复测数据（JSON）
{
"vue": "3.5.44",
"method": "exact SFCs decoded from original review links, recompiled with current local compiler-sfc; only runtime variant changes",
"results": [
{
"case": 1,
"variant": "upstream",
"states": [
{
"step": "initial",
"nodes": [
{
"text": "no transition, no teleport",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": "--review1-color: red;"
},
{
"text": "YES transition, NO teleport",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": "--review1-color: red;"
},
{
"text": "YES telport, NO transition",
"color": "rgb(255, 0, 0)",
"owner": "0",
"style": "--review1-color: red;"
},
{
"text": "YES transition, YES teleport",
"color": "rgb(255, 0, 0)",
"owner": "0",
"style": "--review1-color: red;"
},
{
"text": "YES transition, YES teleport - with extra div wrapper",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": null
}
]
},
{
"step": "toggle-1",
"nodes": [
{
"text": "no transition, no teleport",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": "--review1-color: red;"
}
]
},
{
"step": "toggle-2",
"nodes": [
{
"text": "no transition, no teleport",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": "--review1-color: red;"
},
{
"text": "YES transition, NO teleport",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": "--review1-color: red;"
},
{
"text": "YES telport, NO transition",
"color": "rgb(255, 0, 0)",
"owner": "0",
"style": "--review1-color: red;"
},
{
"text": "YES transition, YES teleport",
"color": "rgb(0, 0, 0)",
"owner": null,
"style": null
},
{
"text": "YES transition, YES teleport - with extra div wrapper",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": null
}
]
},
{
"step": "toggle-3",
"nodes": [
{
"text": "no transition, no teleport",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": "--review1-color: red;"
}
]
},
{
"step": "toggle-4",
"nodes": [
{
"text": "no transition, no teleport",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": "--review1-color: red;"
},
{
"text": "YES transition, NO teleport",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": "--review1-color: red;"
},
{
"text": "YES telport, NO transition",
"color": "rgb(255, 0, 0)",
"owner": "0",
"style": "--review1-color: red;"
},
{
"text": "YES transition, YES teleport",
"color": "rgb(0, 0, 0)",
"owner": null,
"style": null
},
{
"text": "YES transition, YES teleport - with extra div wrapper",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": null
}
]
}
],
"errors": [],
"allVisibleTextRed": false
},
{
"case": 1,
"variant": "hooks-v1",
"states": [
{
"step": "initial",
"nodes": [
{
"text": "no transition, no teleport",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": "--review1-color: red;"
},
{
"text": "YES transition, NO teleport",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": "--review1-color: red;"
},
{
"text": "YES telport, NO transition",
"color": "rgb(255, 0, 0)",
"owner": "0",
"style": "--review1-color: red;"
},
{
"text": "YES transition, YES teleport",
"color": "rgb(255, 0, 0)",
"owner": "0",
"style": "--review1-color: red;"
},
{
"text": "YES transition, YES teleport - with extra div wrapper",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": null
}
]
},
{
"step": "toggle-1",
"nodes": [
{
"text": "no transition, no teleport",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": "--review1-color: red;"
}
]
},
{
"step": "toggle-2",
"nodes": [
{
"text": "no transition, no teleport",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": "--review1-color: red;"
},
{
"text": "YES transition, NO teleport",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": "--review1-color: red;"
},
{
"text": "YES telport, NO transition",
"color": "rgb(255, 0, 0)",
"owner": "0",
"style": "--review1-color: red;"
},
{
"text": "YES transition, YES teleport",
"color": "rgb(255, 0, 0)",
"owner": "0",
"style": "--review1-color: red;"
},
{
"text": "YES transition, YES teleport - with extra div wrapper",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": null
}
]
},
{
"step": "toggle-3",
"nodes": [
{
"text": "no transition, no teleport",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": "--review1-color: red;"
}
]
},
{
"step": "toggle-4",
"nodes": [
{
"text": "no transition, no teleport",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": "--review1-color: red;"
},
{
"text": "YES transition, NO teleport",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": "--review1-color: red;"
},
{
"text": "YES telport, NO transition",
"color": "rgb(255, 0, 0)",
"owner": "0",
"style": "--review1-color: red;"
},
{
"text": "YES transition, YES teleport",
"color": "rgb(255, 0, 0)",
"owner": "0",
"style": "--review1-color: red;"
},
{
"text": "YES transition, YES teleport - with extra div wrapper",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": null
}
]
}
],
"errors": [],
"allVisibleTextRed": true
},
{
"case": 1,
"variant": "current",
"states": [
{
"step": "initial",
"nodes": [
{
"text": "no transition, no teleport",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": "--review1-color: red;"
},
{
"text": "YES transition, NO teleport",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": "--review1-color: red;"
},
{
"text": "YES telport, NO transition",
"color": "rgb(255, 0, 0)",
"owner": "0",
"style": "--review1-color: red;"
},
{
"text": "YES transition, YES teleport",
"color": "rgb(255, 0, 0)",
"owner": "0",
"style": "--review1-color: red;"
},
{
"text": "YES transition, YES teleport - with extra div wrapper",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": null
}
]
},
{
"step": "toggle-1",
"nodes": [
{
"text": "no transition, no teleport",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": "--review1-color: red;"
}
]
},
{
"step": "toggle-2",
"nodes": [
{
"text": "no transition, no teleport",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": "--review1-color: red;"
},
{
"text": "YES transition, NO teleport",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": "--review1-color: red;"
},
{
"text": "YES telport, NO transition",
"color": "rgb(255, 0, 0)",
"owner": "0",
"style": "--review1-color: red;"
},
{
"text": "YES transition, YES teleport",
"color": "rgb(255, 0, 0)",
"owner": "0",
"style": "--review1-color: red;"
},
{
"text": "YES transition, YES teleport - with extra div wrapper",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": null
}
]
},
{
"step": "toggle-3",
"nodes": [
{
"text": "no transition, no teleport",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": "--review1-color: red;"
}
]
},
{
"step": "toggle-4",
"nodes": [
{
"text": "no transition, no teleport",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": "--review1-color: red;"
},
{
"text": "YES transition, NO teleport",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": "--review1-color: red;"
},
{
"text": "YES telport, NO transition",
"color": "rgb(255, 0, 0)",
"owner": "0",
"style": "--review1-color: red;"
},
{
"text": "YES transition, YES teleport",
"color": "rgb(255, 0, 0)",
"owner": "0",
"style": "--review1-color: red;"
},
{
"text": "YES transition, YES teleport - with extra div wrapper",
"color": "rgb(255, 0, 0)",
"owner": null,
"style": null
}
]
}
],
"errors": [],
"allVisibleTextRed": true
},
{
"case": 2,
"variant": "upstream",
"states": [
{
"step": "initial",
"nodes": []
},
{
"step": "toggle-1",
"nodes": [
{
"text": "YES transition, YES teleport",
"color": "rgb(0, 0, 0)",
"owner": null,
"style": null
}
]
},
{
"step": "toggle-2",
"nodes": []
},
{
"step": "toggle-3",
"nodes": [
{
"text": "YES transition, YES teleport",
"color": "rgb(0, 0, 0)",
"owner": null,
"style": null
}
]
}
],
"errors": [],
"allVisibleTextRed": false
},
{
"case": 2,
"variant": "hooks-v1",
"states": [
{
"step": "initial",
"nodes": []
},
{
"step": "toggle-1",
"nodes": [
{
"text": "YES transition, YES teleport",
"color": "rgb(255, 0, 0)",
"owner": "0",
"style": "--review2-color: red;"
}
]
},
{
"step": "toggle-2",
"nodes": []
},
{
"step": "toggle-3",
"nodes": [
{
"text": "YES transition, YES teleport",
"color": "rgb(255, 0, 0)",
"owner": "0",
"style": "--review2-color: red;"
}
]
}
],
"errors": [],
"allVisibleTextRed": true
},
{
"case": 2,
"variant": "current",
"states": [
{
"step": "initial",
"nodes": []
},
{
"step": "toggle-1",
"nodes": [
{
"text": "YES transition, YES teleport",
"color": "rgb(255, 0, 0)",
"owner": "0",
"style": "--review2-color: red;"
}
]
},
{
"step": "toggle-2",
"nodes": []
},
{
"step": "toggle-3",
"nodes": [
{
"text": "YES transition, YES teleport",
"color": "rgb(255, 0, 0)",
"owner": "0",
"style": "--review2-color: red;"
}
]
}
],
"errors": [],
"allVisibleTextRed": true
}
],
"reviewCases": [
{
"comment": "https://github.com/vuejs/core/pull/7344#issuecomment-1351284795",
"author": "moushicheng",
"date": "2022-12-14T12:41:17Z",
"url": "https://deploy-preview-7344--vue-sfc-playground.netlify.app/#eNqlVM1um0AQfpXpXpxIXjg0UiXXsdpDr+2huVTigmGwt4Xd1e4ARZbfvbNAMYlRoiQXpJmd72e+1XISX62NmhrFRmwJK1umhLtEA2z3NZHR8CUrVfbnPhH+aNqHo9IHuIcPU5GI3YM5HEoECuU2HmAjhYt3/SdUfSdXDWRl6j0TEv4lhoc+gDZALtVekTJ63ZdYojWOelzMwAvLZXJEL/BCI1Uxtz1JAfz69vOR2vcfj9Tmetv4iViiE+KkhmkgwxJ7k3cT+1usYBnIBh+T2oKTUXUK4kUvV0G92t91WKPjWVpzlwuJXRt/OcGL3YUV3rDE82uAhFbREZjIpRC4W5dai26mONtwYcdnLyo0ppfFpc+csgQeqbbcUVXv4QQOCzhD4UwFK36SqwGdGe0JMlMaxy+PZ25WDvPV7f+T+bsMp+RqvP0cVAedUZO6MshHIS04BeqecsO57ZXOb/oq4M49tB8XazGYk1Vqo9/eaP5N9NhkPPCJ2AxsocemQ52II5H1mzjO0Zamk9Zho7CVnz7e3UnJU9IXmeREuoMztc4jjVSqoos49JiPI1drUhVG6Cu5d6b16Fg+EeuZUszNBp10qHN0fFfvVn5CeKUexDmdszj/A/IsvhM="
},
{
"comment": "https://github.com/vuejs/core/pull/7344#issuecomment-1354367044",
"author": "edison1105",
"date": "2022-12-16T08:16:10Z",
"url": "https://deploy-preview-7344--vue-sfc-playground.netlify.app/#__DEV__eNqlkU1u2zAQha8y5cYJYEqLBijgOka76AmaTQFuZGlks6FIYjiSIxi+e4aS4hjJMloIePPzvtHTWf2OsRh6VBu1Zeyiqxh3xgNs9z1z8PCrdrZ+fjQqHcPp6Wj9AR7h21UYtXsKh4ND4Cy35by2WFC5m15ZGW9YEA5jIAYOYrkPzSgGuSvTTJVPlu2yPdUaO0DtqpRkmvGFjYJB2/b2nKtBfv79+QvvPutZL8yraSmub9DyA1UKy/hydC5cYxGZarKRISH3USq2mz7nDIQtXKCl0MFK8lzN23XwiaEOLpDEJjN3K8Jmdf/WuQ01d9vKJbz/mbEzaIHy6DK/yBnAOXtPnhtJY299czepvHeZVqdxtVbzdbqrYvE/BS8/edo1SyMZtZndck2uztqoI3NMm7JsMLow6kg4WDzpH98fHrSWKZ3aWksk44FC75vCIzvbjkUVYyntgnrPtsMCU6f3FE4JSfBGrW9IpRQHJE3oGySkr5M/GH6iZ7ikc1GXV60oBH0="
}
]
}保留节点、wrapper 与全局变量的取舍
如果一定要继续用 v-bind() 怎么办
v-show 或 keepMounted 能让元素初始就存在，Teleport mount 时有机会给它补 owner，后面只切显示隐藏。这对图片预加载、避免重型内容反复销毁是合理手段，但它会改变组件生命周期：子组件不会随关闭卸载，请求、定时器、表单草稿和焦点状态都要额外管理。
其他可选方案包括在 Transition 外加额外 wrapper，或者把变量提升到 :root / <head>。这些方案适合少量局部场景，不适合公共弹窗尺寸这类基础契约：wrapper 会改变 DOM 层级和样式命中；全局变量要处理命名唯一性、多实例覆盖和卸载清理。
应用层不要调用 Vue 内部的 instance.ut() 或自己仿造 data-v-owner。这些都是 runtime 私有细节，版本升级后没有兼容保证。业务代码应该选择稳定的公共能力：保留 v-bind() 给普通颜色、渐变、背景图、轻量展示状态；把弹窗宽度、高度、遮罩内边距、首屏固定定位这类会导致布局坍塌的关键几何值放回显式 :style 或稳定 class。
公共弹窗怎样保护尺寸契约
这次工程上怎么防
公共弹窗最后选择绕开这个坑：关键尺寸不用 scoped CSS v-bind()，而是把 CSS vars 通过 :style 挂到实际 .common-modal 和 .common-modal__dialog 上。这样既保留样式层消费变量的可读性，也避开 Vue owner 标记丢失。
测试也不能只断言「style attribute 里有变量」。这次问题恰恰说明，变量存在不等于布局契约生效。更稳的保护有两类：
- 组件单测：初始
open=false后再打开，检查实际弹窗节点上有--common-modal-dialog-min-width、--common-modal-dialog-max-width，并确认这些变量是通过模板:style挂到真实节点上的。 - 架构单测：读取
CommonModal.vue源码，禁止在这个公共弹窗的 scoped style 里重新使用v-bind(，同时断言模板仍然保留:style="modalFrameStyle"和:style="dialogStyle"。
E2E 则适合守最终用户结果：打开真实「基本信息」弹窗后，取可见 .common-modal__dialog 的 DOMRect.width，断言它是 375px 或符合当前设计约束。不要选隐藏节点，也不要只看 class 和 inline variable。
浏览器原始记录
打开原文件 vue-3.5.44-browser-reproduction.json
{
"version": "3.5.44",
"browser": "155.0.8059.85",
"viewport": {
"width": 1000,
"height": 640
},
"method": "Official npm production global runtime versus the previously tested unchanged local patch; initial open=false; width and color never reassigned; Transition CSS disabled.",
"results": [
{
"mode": "if",
"variant": "release",
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"inline": "--repro-boxWidth: 375px; --repro-boxColor: red;"
},
{
"mode": "if",
"variant": "patched",
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"inline": "--repro-boxWidth: 375px; --repro-boxColor: red;"
},
{
"mode": "transition-if",
"variant": "release",
"width": "928px",
"color": "rgb(32, 43, 46)",
"owner": null,
"inline": null
},
{
"mode": "transition-if",
"variant": "patched",
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"inline": "--repro-boxWidth: 375px; --repro-boxColor: red;"
},
{
"mode": "show",
"variant": "release",
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"inline": "--repro-boxWidth: 375px; --repro-boxColor: red;"
},
{
"mode": "show",
"variant": "patched",
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"inline": "--repro-boxWidth: 375px; --repro-boxColor: red;"
}
]
}首次打开回归摘要
打开原文件 teleport-first-open-regressions-2026-10-27.json
{
"date": "2026-10-27",
"base": "0ff253bfba3ee8d3d65448bd44ad890fd01b0ecd",
"testPath": "packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts",
"patchedRuntimeSourceSha256": "90733f857678500ce45ca882f24ecf4bbf53cc3b2a83f57d869af9519ac21aab",
"testSourceSha256": "6469ff848af9d994066b90847504f92a968b5e5bebb90d25f5bba6defc1f1bd9",
"contract": "After one nextTick on first open and each of two reopens: exact data-v-owner, --width=375px and --color=red. Width and color are never reassigned.",
"fixture": "compiler-dom compiled templates with stable Transition slots; defer x ownerReadsOpen boolean matrix; render count assertions distinguish owner updates from internal-only updates",
"upstreamControl": {
"sourceOverrideLoaded": true,
"expectedFailures": 4,
"unaffectedTestsSkipped": 30,
"regressions": [
{
"title": "applies css vars on first opening with a compiled teleport (defer: false, owner reads open: false)",
"status": "failed",
"failureMessages": [
"AssertionError: expected null to be '0' // Object.is equality\n at core/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts:462:54\n at async core/node_modules/.pnpm/@vitest+runner@4.1.11/node_modules/@vitest/runner/dist/chunk-artifact.js:1903:20"
]
},
{
"title": "applies css vars on first opening with a compiled teleport (defer: true, owner reads open: false)",
"status": "failed",
"failureMessages": [
"AssertionError: expected null to be '3' // Object.is equality\n at core/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts:462:54\n at async core/node_modules/.pnpm/@vitest+runner@4.1.11/node_modules/@vitest/runner/dist/chunk-artifact.js:1903:20"
]
},
{
"title": "applies css vars on first opening with a compiled teleport (defer: false, owner reads open: true)",
"status": "failed",
"failureMessages": [
"AssertionError: expected null to be '6' // Object.is equality\n at core/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts:462:54\n at async core/node_modules/.pnpm/@vitest+runner@4.1.11/node_modules/@vitest/runner/dist/chunk-artifact.js:1903:20"
]
},
{
"title": "applies css vars on first opening with a compiled teleport (defer: true, owner reads open: true)",
"status": "failed",
"failureMessages": [
"AssertionError: expected null to be '9' // Object.is equality\n at core/packages/runtime-dom/__tests__/helpers/useCssVars.spec.ts:462:54\n at async core/node_modules/.pnpm/@vitest+runner@4.1.11/node_modules/@vitest/runner/dist/chunk-artifact.js:1903:20"
]
}
]
},
"patched": {
"cssVarsFile": {
"passed": 34,
"regressions": [
{
"title": "applies css vars on first opening with a compiled teleport (defer: false, owner reads open: false)",
"status": "passed"
},
{
"title": "applies css vars on first opening with a compiled teleport (defer: true, owner reads open: false)",
"status": "passed"
},
{
"title": "applies css vars on first opening with a compiled teleport (defer: false, owner reads open: true)",
"status": "passed"
},
{
"title": "applies css vars on first opening with a compiled teleport (defer: true, owner reads open: true)",
"status": "passed"
}
]
},
"relatedRuntimeSuite": {
"passed": 1793,
"failed": 0,
"skipped": 1,
"files": 77
}
},
"browser": {
"version": "155.0.8059.85",
"cases": [
{
"defer": false,
"ownerReadsOpen": false,
"variant": "upstream",
"openings": [
{
"cycle": 0,
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"expectedOwner": "0",
"inlineWidth": "",
"inlineColor": "",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 0,
"newElement": true
},
{
"cycle": 1,
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"expectedOwner": "0",
"inlineWidth": "",
"inlineColor": "",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 0,
"newElement": true
},
{
"cycle": 2,
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"expectedOwner": "0",
"inlineWidth": "",
"inlineColor": "",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 0,
"newElement": true
}
]
},
{
"defer": false,
"ownerReadsOpen": false,
"variant": "current",
"openings": [
{
"cycle": 0,
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"expectedOwner": "0",
"inlineWidth": "375px",
"inlineColor": "red",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 0,
"newElement": true
},
{
"cycle": 1,
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"expectedOwner": "0",
"inlineWidth": "375px",
"inlineColor": "red",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 0,
"newElement": true
},
{
"cycle": 2,
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"expectedOwner": "0",
"inlineWidth": "375px",
"inlineColor": "red",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 0,
"newElement": true
}
]
},
{
"defer": false,
"ownerReadsOpen": true,
"variant": "upstream",
"openings": [
{
"cycle": 0,
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"expectedOwner": "0",
"inlineWidth": "",
"inlineColor": "",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 1,
"newElement": true
},
{
"cycle": 1,
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"expectedOwner": "0",
"inlineWidth": "",
"inlineColor": "",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 3,
"newElement": true
},
{
"cycle": 2,
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"expectedOwner": "0",
"inlineWidth": "",
"inlineColor": "",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 5,
"newElement": true
}
]
},
{
"defer": false,
"ownerReadsOpen": true,
"variant": "current",
"openings": [
{
"cycle": 0,
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"expectedOwner": "0",
"inlineWidth": "375px",
"inlineColor": "red",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 1,
"newElement": true
},
{
"cycle": 1,
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"expectedOwner": "0",
"inlineWidth": "375px",
"inlineColor": "red",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 3,
"newElement": true
},
{
"cycle": 2,
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"expectedOwner": "0",
"inlineWidth": "375px",
"inlineColor": "red",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 5,
"newElement": true
}
]
},
{
"defer": true,
"ownerReadsOpen": false,
"variant": "upstream",
"openings": [
{
"cycle": 0,
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"expectedOwner": "0",
"inlineWidth": "",
"inlineColor": "",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 0,
"newElement": true
},
{
"cycle": 1,
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"expectedOwner": "0",
"inlineWidth": "",
"inlineColor": "",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 0,
"newElement": true
},
{
"cycle": 2,
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"expectedOwner": "0",
"inlineWidth": "",
"inlineColor": "",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 0,
"newElement": true
}
]
},
{
"defer": true,
"ownerReadsOpen": false,
"variant": "current",
"openings": [
{
"cycle": 0,
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"expectedOwner": "0",
"inlineWidth": "375px",
"inlineColor": "red",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 0,
"newElement": true
},
{
"cycle": 1,
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"expectedOwner": "0",
"inlineWidth": "375px",
"inlineColor": "red",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 0,
"newElement": true
},
{
"cycle": 2,
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"expectedOwner": "0",
"inlineWidth": "375px",
"inlineColor": "red",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 0,
"newElement": true
}
]
},
{
"defer": true,
"ownerReadsOpen": true,
"variant": "upstream",
"openings": [
{
"cycle": 0,
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"expectedOwner": "0",
"inlineWidth": "",
"inlineColor": "",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 1,
"newElement": true
},
{
"cycle": 1,
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"expectedOwner": "0",
"inlineWidth": "",
"inlineColor": "",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 3,
"newElement": true
},
{
"cycle": 2,
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"expectedOwner": "0",
"inlineWidth": "",
"inlineColor": "",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 5,
"newElement": true
}
]
},
{
"defer": true,
"ownerReadsOpen": true,
"variant": "current",
"openings": [
{
"cycle": 0,
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"expectedOwner": "0",
"inlineWidth": "375px",
"inlineColor": "red",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 1,
"newElement": true
},
{
"cycle": 1,
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"expectedOwner": "0",
"inlineWidth": "375px",
"inlineColor": "red",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 3,
"newElement": true
},
{
"cycle": 2,
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"expectedOwner": "0",
"inlineWidth": "375px",
"inlineColor": "red",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 5,
"newElement": true
}
]
}
]
},
"staticChecks": [
"TypeScript --incremental --noEmit",
"ESLint on the changed spec",
"Prettier --check on the changed spec",
"git diff --check"
],
"preservedPreviousTests": true,
"publicationNotes": "错误栈中的本机仓库绝对路径已替换为 core/；其余测试结果保持原样。",
"patchDownload": {
"file": "files/vue-teleport-css-vars-0ff253b.patch",
"sha256": "b35bdd57938b549f5a3c7b65d3ccfabce55358bb922c8b561f8bee726370d4d0",
"bytes": 18871
}
}逐次打开的浏览器记录
打开原文件 teleport-first-open-browser-2026-10-27.json
{
"date": "2026-10-27",
"base": "0ff253bfba3ee8d3d65448bd44ad890fd01b0ecd",
"patchedSourceSha256": "90733f857678500ce45ca882f24ecf4bbf53cc3b2a83f57d869af9519ac21aab",
"browser": "155.0.8059.85",
"viewport": {
"width": 1000,
"height": 640
},
"bodyMargin": "36px",
"method": "Real SFC compileScript/compileStyle outputs; upstream and unchanged patched production runtimes; 3 openings per case; only open is assigned after mounting; CSS transitions disabled; width and color remain 375px/red.",
"cases": [
{
"defer": false,
"ownerReadsOpen": false,
"variant": "upstream",
"input": "<script setup>\nimport { ref, getCurrentInstance, onUpdated } from 'vue'\nconst open = ref(false)\nconst boxWidth = ref('375px')\nconst boxColor = ref('red')\nlet updates = 0\nonUpdated(() => { updates++ })\nwindow.control = { open, boxWidth, boxColor, ownerId: getCurrentInstance().uid, getUpdates: () => updates }\n</script>\n<template>\n <div class=\"owner\">\n \n <Teleport to=\"body\">\n <Transition :css=\"false\">\n <div v-if=\"open\" class=\"probe\">modal</div>\n </Transition>\n </Teleport>\n </div>\n</template>\n<style>.probe { width: v-bind(boxWidth); color: v-bind(boxColor) }</style>",
"compiledScript": "import { useCssVars as _useCssVars, unref as _unref } from 'vue'\nimport { openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, Teleport as _Teleport, createBlock as _createBlock } from \"vue\"\n\nconst _hoisted_1 = { class: \"owner\" }\nconst _hoisted_2 = {\n key: 0,\n class: \"probe\"\n}\n\nimport { ref, getCurrentInstance, onUpdated } from 'vue'\n\nexport default {\n __name: 'TeleportExtraRegression',\n setup(__props) {\n\n_useCssVars(_ctx => ({\n \"extra-boxWidth\": (boxWidth.value),\n \"extra-boxColor\": (boxColor.value)\n}))\n\nconst open = ref(false)\nconst boxWidth = ref('375px')\nconst boxColor = ref('red')\nlet updates = 0\nonUpdated(() => { updates++ })\nwindow.control = { open, boxWidth, boxColor, ownerId: getCurrentInstance().uid, getUpdates: () => updates }\n\nreturn (_ctx, _cache) => {\n return (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n (_openBlock(), _createBlock(_Teleport, { to: \"body\" }, [\n _createVNode(_Transition, { css: false }, {\n default: _withCtx(() => [\n (open.value)\n ? (_openBlock(), _createElementBlock(\"div\", _hoisted_2, \"modal\"))\n : _createCommentVNode(\"v-if\", true)\n ]),\n _: 1 /* STABLE */\n })\n ]))\n ]))\n}\n}\n\n}",
"compiledCss": ".probe { width: var(--extra-boxWidth); color: var(--extra-boxColor)\n}",
"bundleSha256": "f92677225c1838500915468e4a9d29f2dbaa195428747dc17b49f6a01411679b",
"openings": [
{
"cycle": 0,
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"expectedOwner": "0",
"inlineWidth": "",
"inlineColor": "",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 0,
"newElement": true
},
{
"cycle": 1,
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"expectedOwner": "0",
"inlineWidth": "",
"inlineColor": "",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 0,
"newElement": true
},
{
"cycle": 2,
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"expectedOwner": "0",
"inlineWidth": "",
"inlineColor": "",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 0,
"newElement": true
}
],
"pageErrors": []
},
{
"defer": false,
"ownerReadsOpen": false,
"variant": "current",
"input": "<script setup>\nimport { ref, getCurrentInstance, onUpdated } from 'vue'\nconst open = ref(false)\nconst boxWidth = ref('375px')\nconst boxColor = ref('red')\nlet updates = 0\nonUpdated(() => { updates++ })\nwindow.control = { open, boxWidth, boxColor, ownerId: getCurrentInstance().uid, getUpdates: () => updates }\n</script>\n<template>\n <div class=\"owner\">\n \n <Teleport to=\"body\">\n <Transition :css=\"false\">\n <div v-if=\"open\" class=\"probe\">modal</div>\n </Transition>\n </Teleport>\n </div>\n</template>\n<style>.probe { width: v-bind(boxWidth); color: v-bind(boxColor) }</style>",
"compiledScript": "import { useCssVars as _useCssVars, unref as _unref } from 'vue'\nimport { openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, Teleport as _Teleport, createBlock as _createBlock } from \"vue\"\n\nconst _hoisted_1 = { class: \"owner\" }\nconst _hoisted_2 = {\n key: 0,\n class: \"probe\"\n}\n\nimport { ref, getCurrentInstance, onUpdated } from 'vue'\n\nexport default {\n __name: 'TeleportExtraRegression',\n setup(__props) {\n\n_useCssVars(_ctx => ({\n \"extra-boxWidth\": (boxWidth.value),\n \"extra-boxColor\": (boxColor.value)\n}))\n\nconst open = ref(false)\nconst boxWidth = ref('375px')\nconst boxColor = ref('red')\nlet updates = 0\nonUpdated(() => { updates++ })\nwindow.control = { open, boxWidth, boxColor, ownerId: getCurrentInstance().uid, getUpdates: () => updates }\n\nreturn (_ctx, _cache) => {\n return (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n (_openBlock(), _createBlock(_Teleport, { to: \"body\" }, [\n _createVNode(_Transition, { css: false }, {\n default: _withCtx(() => [\n (open.value)\n ? (_openBlock(), _createElementBlock(\"div\", _hoisted_2, \"modal\"))\n : _createCommentVNode(\"v-if\", true)\n ]),\n _: 1 /* STABLE */\n })\n ]))\n ]))\n}\n}\n\n}",
"compiledCss": ".probe { width: var(--extra-boxWidth); color: var(--extra-boxColor)\n}",
"bundleSha256": "045a4019fd60fe97053e2f87792cc8da9cf8f5f8d7d1485b9e897305da6008bf",
"openings": [
{
"cycle": 0,
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"expectedOwner": "0",
"inlineWidth": "375px",
"inlineColor": "red",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 0,
"newElement": true
},
{
"cycle": 1,
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"expectedOwner": "0",
"inlineWidth": "375px",
"inlineColor": "red",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 0,
"newElement": true
},
{
"cycle": 2,
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"expectedOwner": "0",
"inlineWidth": "375px",
"inlineColor": "red",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 0,
"newElement": true
}
],
"pageErrors": []
},
{
"defer": false,
"ownerReadsOpen": true,
"variant": "upstream",
"input": "<script setup>\nimport { ref, getCurrentInstance, onUpdated } from 'vue'\nconst open = ref(false)\nconst boxWidth = ref('375px')\nconst boxColor = ref('red')\nlet updates = 0\nonUpdated(() => { updates++ })\nwindow.control = { open, boxWidth, boxColor, ownerId: getCurrentInstance().uid, getUpdates: () => updates }\n</script>\n<template>\n <div class=\"owner\">\n <p>{{ open }}</p>\n <Teleport to=\"body\">\n <Transition :css=\"false\">\n <div v-if=\"open\" class=\"probe\">modal</div>\n </Transition>\n </Teleport>\n </div>\n</template>\n<style>.probe { width: v-bind(boxWidth); color: v-bind(boxColor) }</style>",
"compiledScript": "import { useCssVars as _useCssVars, unref as _unref } from 'vue'\nimport { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, Teleport as _Teleport, createBlock as _createBlock } from \"vue\"\n\nconst _hoisted_1 = { class: \"owner\" }\nconst _hoisted_2 = {\n key: 0,\n class: \"probe\"\n}\n\nimport { ref, getCurrentInstance, onUpdated } from 'vue'\n\nexport default {\n __name: 'TeleportExtraRegression',\n setup(__props) {\n\n_useCssVars(_ctx => ({\n \"extra-boxWidth\": (boxWidth.value),\n \"extra-boxColor\": (boxColor.value)\n}))\n\nconst open = ref(false)\nconst boxWidth = ref('375px')\nconst boxColor = ref('red')\nlet updates = 0\nonUpdated(() => { updates++ })\nwindow.control = { open, boxWidth, boxColor, ownerId: getCurrentInstance().uid, getUpdates: () => updates }\n\nreturn (_ctx, _cache) => {\n return (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n _createElementVNode(\"p\", null, _toDisplayString(open.value), 1 /* TEXT */),\n (_openBlock(), _createBlock(_Teleport, { to: \"body\" }, [\n _createVNode(_Transition, { css: false }, {\n default: _withCtx(() => [\n (open.value)\n ? (_openBlock(), _createElementBlock(\"div\", _hoisted_2, \"modal\"))\n : _createCommentVNode(\"v-if\", true)\n ]),\n _: 1 /* STABLE */\n })\n ]))\n ]))\n}\n}\n\n}",
"compiledCss": ".probe { width: var(--extra-boxWidth); color: var(--extra-boxColor)\n}",
"bundleSha256": "f92677225c1838500915468e4a9d29f2dbaa195428747dc17b49f6a01411679b",
"openings": [
{
"cycle": 0,
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"expectedOwner": "0",
"inlineWidth": "",
"inlineColor": "",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 1,
"newElement": true
},
{
"cycle": 1,
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"expectedOwner": "0",
"inlineWidth": "",
"inlineColor": "",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 3,
"newElement": true
},
{
"cycle": 2,
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"expectedOwner": "0",
"inlineWidth": "",
"inlineColor": "",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 5,
"newElement": true
}
],
"pageErrors": []
},
{
"defer": false,
"ownerReadsOpen": true,
"variant": "current",
"input": "<script setup>\nimport { ref, getCurrentInstance, onUpdated } from 'vue'\nconst open = ref(false)\nconst boxWidth = ref('375px')\nconst boxColor = ref('red')\nlet updates = 0\nonUpdated(() => { updates++ })\nwindow.control = { open, boxWidth, boxColor, ownerId: getCurrentInstance().uid, getUpdates: () => updates }\n</script>\n<template>\n <div class=\"owner\">\n <p>{{ open }}</p>\n <Teleport to=\"body\">\n <Transition :css=\"false\">\n <div v-if=\"open\" class=\"probe\">modal</div>\n </Transition>\n </Teleport>\n </div>\n</template>\n<style>.probe { width: v-bind(boxWidth); color: v-bind(boxColor) }</style>",
"compiledScript": "import { useCssVars as _useCssVars, unref as _unref } from 'vue'\nimport { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, Teleport as _Teleport, createBlock as _createBlock } from \"vue\"\n\nconst _hoisted_1 = { class: \"owner\" }\nconst _hoisted_2 = {\n key: 0,\n class: \"probe\"\n}\n\nimport { ref, getCurrentInstance, onUpdated } from 'vue'\n\nexport default {\n __name: 'TeleportExtraRegression',\n setup(__props) {\n\n_useCssVars(_ctx => ({\n \"extra-boxWidth\": (boxWidth.value),\n \"extra-boxColor\": (boxColor.value)\n}))\n\nconst open = ref(false)\nconst boxWidth = ref('375px')\nconst boxColor = ref('red')\nlet updates = 0\nonUpdated(() => { updates++ })\nwindow.control = { open, boxWidth, boxColor, ownerId: getCurrentInstance().uid, getUpdates: () => updates }\n\nreturn (_ctx, _cache) => {\n return (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n _createElementVNode(\"p\", null, _toDisplayString(open.value), 1 /* TEXT */),\n (_openBlock(), _createBlock(_Teleport, { to: \"body\" }, [\n _createVNode(_Transition, { css: false }, {\n default: _withCtx(() => [\n (open.value)\n ? (_openBlock(), _createElementBlock(\"div\", _hoisted_2, \"modal\"))\n : _createCommentVNode(\"v-if\", true)\n ]),\n _: 1 /* STABLE */\n })\n ]))\n ]))\n}\n}\n\n}",
"compiledCss": ".probe { width: var(--extra-boxWidth); color: var(--extra-boxColor)\n}",
"bundleSha256": "045a4019fd60fe97053e2f87792cc8da9cf8f5f8d7d1485b9e897305da6008bf",
"openings": [
{
"cycle": 0,
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"expectedOwner": "0",
"inlineWidth": "375px",
"inlineColor": "red",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 1,
"newElement": true
},
{
"cycle": 1,
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"expectedOwner": "0",
"inlineWidth": "375px",
"inlineColor": "red",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 3,
"newElement": true
},
{
"cycle": 2,
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"expectedOwner": "0",
"inlineWidth": "375px",
"inlineColor": "red",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 5,
"newElement": true
}
],
"pageErrors": []
},
{
"defer": true,
"ownerReadsOpen": false,
"variant": "upstream",
"input": "<script setup>\nimport { ref, getCurrentInstance, onUpdated } from 'vue'\nconst open = ref(false)\nconst boxWidth = ref('375px')\nconst boxColor = ref('red')\nlet updates = 0\nonUpdated(() => { updates++ })\nwindow.control = { open, boxWidth, boxColor, ownerId: getCurrentInstance().uid, getUpdates: () => updates }\n</script>\n<template>\n <div class=\"owner\">\n \n <Teleport to=\"body\" defer>\n <Transition :css=\"false\">\n <div v-if=\"open\" class=\"probe\">modal</div>\n </Transition>\n </Teleport>\n </div>\n</template>\n<style>.probe { width: v-bind(boxWidth); color: v-bind(boxColor) }</style>",
"compiledScript": "import { useCssVars as _useCssVars, unref as _unref } from 'vue'\nimport { openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, Teleport as _Teleport, createBlock as _createBlock } from \"vue\"\n\nconst _hoisted_1 = { class: \"owner\" }\nconst _hoisted_2 = {\n key: 0,\n class: \"probe\"\n}\n\nimport { ref, getCurrentInstance, onUpdated } from 'vue'\n\nexport default {\n __name: 'TeleportExtraRegression',\n setup(__props) {\n\n_useCssVars(_ctx => ({\n \"extra-boxWidth\": (boxWidth.value),\n \"extra-boxColor\": (boxColor.value)\n}))\n\nconst open = ref(false)\nconst boxWidth = ref('375px')\nconst boxColor = ref('red')\nlet updates = 0\nonUpdated(() => { updates++ })\nwindow.control = { open, boxWidth, boxColor, ownerId: getCurrentInstance().uid, getUpdates: () => updates }\n\nreturn (_ctx, _cache) => {\n return (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n (_openBlock(), _createBlock(_Teleport, {\n to: \"body\",\n defer: \"\"\n }, [\n _createVNode(_Transition, { css: false }, {\n default: _withCtx(() => [\n (open.value)\n ? (_openBlock(), _createElementBlock(\"div\", _hoisted_2, \"modal\"))\n : _createCommentVNode(\"v-if\", true)\n ]),\n _: 1 /* STABLE */\n })\n ]))\n ]))\n}\n}\n\n}",
"compiledCss": ".probe { width: var(--extra-boxWidth); color: var(--extra-boxColor)\n}",
"bundleSha256": "f92677225c1838500915468e4a9d29f2dbaa195428747dc17b49f6a01411679b",
"openings": [
{
"cycle": 0,
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"expectedOwner": "0",
"inlineWidth": "",
"inlineColor": "",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 0,
"newElement": true
},
{
"cycle": 1,
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"expectedOwner": "0",
"inlineWidth": "",
"inlineColor": "",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 0,
"newElement": true
},
{
"cycle": 2,
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"expectedOwner": "0",
"inlineWidth": "",
"inlineColor": "",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 0,
"newElement": true
}
],
"pageErrors": []
},
{
"defer": true,
"ownerReadsOpen": false,
"variant": "current",
"input": "<script setup>\nimport { ref, getCurrentInstance, onUpdated } from 'vue'\nconst open = ref(false)\nconst boxWidth = ref('375px')\nconst boxColor = ref('red')\nlet updates = 0\nonUpdated(() => { updates++ })\nwindow.control = { open, boxWidth, boxColor, ownerId: getCurrentInstance().uid, getUpdates: () => updates }\n</script>\n<template>\n <div class=\"owner\">\n \n <Teleport to=\"body\" defer>\n <Transition :css=\"false\">\n <div v-if=\"open\" class=\"probe\">modal</div>\n </Transition>\n </Teleport>\n </div>\n</template>\n<style>.probe { width: v-bind(boxWidth); color: v-bind(boxColor) }</style>",
"compiledScript": "import { useCssVars as _useCssVars, unref as _unref } from 'vue'\nimport { openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, Teleport as _Teleport, createBlock as _createBlock } from \"vue\"\n\nconst _hoisted_1 = { class: \"owner\" }\nconst _hoisted_2 = {\n key: 0,\n class: \"probe\"\n}\n\nimport { ref, getCurrentInstance, onUpdated } from 'vue'\n\nexport default {\n __name: 'TeleportExtraRegression',\n setup(__props) {\n\n_useCssVars(_ctx => ({\n \"extra-boxWidth\": (boxWidth.value),\n \"extra-boxColor\": (boxColor.value)\n}))\n\nconst open = ref(false)\nconst boxWidth = ref('375px')\nconst boxColor = ref('red')\nlet updates = 0\nonUpdated(() => { updates++ })\nwindow.control = { open, boxWidth, boxColor, ownerId: getCurrentInstance().uid, getUpdates: () => updates }\n\nreturn (_ctx, _cache) => {\n return (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n (_openBlock(), _createBlock(_Teleport, {\n to: \"body\",\n defer: \"\"\n }, [\n _createVNode(_Transition, { css: false }, {\n default: _withCtx(() => [\n (open.value)\n ? (_openBlock(), _createElementBlock(\"div\", _hoisted_2, \"modal\"))\n : _createCommentVNode(\"v-if\", true)\n ]),\n _: 1 /* STABLE */\n })\n ]))\n ]))\n}\n}\n\n}",
"compiledCss": ".probe { width: var(--extra-boxWidth); color: var(--extra-boxColor)\n}",
"bundleSha256": "045a4019fd60fe97053e2f87792cc8da9cf8f5f8d7d1485b9e897305da6008bf",
"openings": [
{
"cycle": 0,
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"expectedOwner": "0",
"inlineWidth": "375px",
"inlineColor": "red",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 0,
"newElement": true
},
{
"cycle": 1,
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"expectedOwner": "0",
"inlineWidth": "375px",
"inlineColor": "red",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 0,
"newElement": true
},
{
"cycle": 2,
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"expectedOwner": "0",
"inlineWidth": "375px",
"inlineColor": "red",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 0,
"newElement": true
}
],
"pageErrors": []
},
{
"defer": true,
"ownerReadsOpen": true,
"variant": "upstream",
"input": "<script setup>\nimport { ref, getCurrentInstance, onUpdated } from 'vue'\nconst open = ref(false)\nconst boxWidth = ref('375px')\nconst boxColor = ref('red')\nlet updates = 0\nonUpdated(() => { updates++ })\nwindow.control = { open, boxWidth, boxColor, ownerId: getCurrentInstance().uid, getUpdates: () => updates }\n</script>\n<template>\n <div class=\"owner\">\n <p>{{ open }}</p>\n <Teleport to=\"body\" defer>\n <Transition :css=\"false\">\n <div v-if=\"open\" class=\"probe\">modal</div>\n </Transition>\n </Teleport>\n </div>\n</template>\n<style>.probe { width: v-bind(boxWidth); color: v-bind(boxColor) }</style>",
"compiledScript": "import { useCssVars as _useCssVars, unref as _unref } from 'vue'\nimport { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, Teleport as _Teleport, createBlock as _createBlock } from \"vue\"\n\nconst _hoisted_1 = { class: \"owner\" }\nconst _hoisted_2 = {\n key: 0,\n class: \"probe\"\n}\n\nimport { ref, getCurrentInstance, onUpdated } from 'vue'\n\nexport default {\n __name: 'TeleportExtraRegression',\n setup(__props) {\n\n_useCssVars(_ctx => ({\n \"extra-boxWidth\": (boxWidth.value),\n \"extra-boxColor\": (boxColor.value)\n}))\n\nconst open = ref(false)\nconst boxWidth = ref('375px')\nconst boxColor = ref('red')\nlet updates = 0\nonUpdated(() => { updates++ })\nwindow.control = { open, boxWidth, boxColor, ownerId: getCurrentInstance().uid, getUpdates: () => updates }\n\nreturn (_ctx, _cache) => {\n return (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n _createElementVNode(\"p\", null, _toDisplayString(open.value), 1 /* TEXT */),\n (_openBlock(), _createBlock(_Teleport, {\n to: \"body\",\n defer: \"\"\n }, [\n _createVNode(_Transition, { css: false }, {\n default: _withCtx(() => [\n (open.value)\n ? (_openBlock(), _createElementBlock(\"div\", _hoisted_2, \"modal\"))\n : _createCommentVNode(\"v-if\", true)\n ]),\n _: 1 /* STABLE */\n })\n ]))\n ]))\n}\n}\n\n}",
"compiledCss": ".probe { width: var(--extra-boxWidth); color: var(--extra-boxColor)\n}",
"bundleSha256": "f92677225c1838500915468e4a9d29f2dbaa195428747dc17b49f6a01411679b",
"openings": [
{
"cycle": 0,
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"expectedOwner": "0",
"inlineWidth": "",
"inlineColor": "",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 1,
"newElement": true
},
{
"cycle": 1,
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"expectedOwner": "0",
"inlineWidth": "",
"inlineColor": "",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 3,
"newElement": true
},
{
"cycle": 2,
"width": "928px",
"color": "rgb(0, 0, 0)",
"owner": null,
"expectedOwner": "0",
"inlineWidth": "",
"inlineColor": "",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 5,
"newElement": true
}
],
"pageErrors": []
},
{
"defer": true,
"ownerReadsOpen": true,
"variant": "current",
"input": "<script setup>\nimport { ref, getCurrentInstance, onUpdated } from 'vue'\nconst open = ref(false)\nconst boxWidth = ref('375px')\nconst boxColor = ref('red')\nlet updates = 0\nonUpdated(() => { updates++ })\nwindow.control = { open, boxWidth, boxColor, ownerId: getCurrentInstance().uid, getUpdates: () => updates }\n</script>\n<template>\n <div class=\"owner\">\n <p>{{ open }}</p>\n <Teleport to=\"body\" defer>\n <Transition :css=\"false\">\n <div v-if=\"open\" class=\"probe\">modal</div>\n </Transition>\n </Teleport>\n </div>\n</template>\n<style>.probe { width: v-bind(boxWidth); color: v-bind(boxColor) }</style>",
"compiledScript": "import { useCssVars as _useCssVars, unref as _unref } from 'vue'\nimport { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, Transition as _Transition, withCtx as _withCtx, createVNode as _createVNode, Teleport as _Teleport, createBlock as _createBlock } from \"vue\"\n\nconst _hoisted_1 = { class: \"owner\" }\nconst _hoisted_2 = {\n key: 0,\n class: \"probe\"\n}\n\nimport { ref, getCurrentInstance, onUpdated } from 'vue'\n\nexport default {\n __name: 'TeleportExtraRegression',\n setup(__props) {\n\n_useCssVars(_ctx => ({\n \"extra-boxWidth\": (boxWidth.value),\n \"extra-boxColor\": (boxColor.value)\n}))\n\nconst open = ref(false)\nconst boxWidth = ref('375px')\nconst boxColor = ref('red')\nlet updates = 0\nonUpdated(() => { updates++ })\nwindow.control = { open, boxWidth, boxColor, ownerId: getCurrentInstance().uid, getUpdates: () => updates }\n\nreturn (_ctx, _cache) => {\n return (_openBlock(), _createElementBlock(\"div\", _hoisted_1, [\n _createElementVNode(\"p\", null, _toDisplayString(open.value), 1 /* TEXT */),\n (_openBlock(), _createBlock(_Teleport, {\n to: \"body\",\n defer: \"\"\n }, [\n _createVNode(_Transition, { css: false }, {\n default: _withCtx(() => [\n (open.value)\n ? (_openBlock(), _createElementBlock(\"div\", _hoisted_2, \"modal\"))\n : _createCommentVNode(\"v-if\", true)\n ]),\n _: 1 /* STABLE */\n })\n ]))\n ]))\n}\n}\n\n}",
"compiledCss": ".probe { width: var(--extra-boxWidth); color: var(--extra-boxColor)\n}",
"bundleSha256": "045a4019fd60fe97053e2f87792cc8da9cf8f5f8d7d1485b9e897305da6008bf",
"openings": [
{
"cycle": 0,
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"expectedOwner": "0",
"inlineWidth": "375px",
"inlineColor": "red",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 1,
"newElement": true
},
{
"cycle": 1,
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"expectedOwner": "0",
"inlineWidth": "375px",
"inlineColor": "red",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 3,
"newElement": true
},
{
"cycle": 2,
"width": "375px",
"color": "rgb(255, 0, 0)",
"owner": "0",
"expectedOwner": "0",
"inlineWidth": "375px",
"inlineColor": "red",
"sourceWidth": "375px",
"sourceColor": "red",
"ownerUpdates": 5,
"newElement": true
}
],
"pageErrors": []
}
]
}