Template 内置组件
这个页面改成了显式导入<Template>组件的写法,不再依赖小写 template lowering。
当前示例覆盖命名 slot、<Template v-if>、 <Template v-if / v-else-if / v-else> 和列表片段四种写法,运行时同样不会额外生成包装节点。
切换场景
观察中间两张卡片出现时,网格项数量是否被额外包裹影响。
普通 div 包裹
中间两张卡片会先进入一个额外 grid item。
主看板
Always visible
告警
2 critical
值班
On-call: Mina
审计流
14 events/min
显式 <Template v-if> 条件片段
中间两张卡片通过 Template 指令直接成为兄弟 grid item,不多套一层 DOM。
主看板
Always visible
告警
2 critical
值班
On-call: Mina
审计流
14 events/min
显式 <Template v-if> / <Template v-else-if> / <Template v-else> 分支链
这组三个连续兄弟 Template 节点直接组成条件链,而不是手写三元表达式。
当前分支: healthy
服务健康
命中 <Template v-if> 分支
延迟稳定
P95 维持在 120ms
显式 <Template slot="header"> 命名片段
header 和 actions 都通过 Template slot 注入,actions slot 里放了两个兄弟节点。
named slot
named slot
运维场景面板
这个 header 本身来自 template 命名插槽,不会生成额外包装节点。
主看板
Always visible
命名插槽内摘要 A
header / actions 都来自 slot prop
命名插槽内摘要 B
body 仍然是默认 slot 内容
审计流
14 events/min
显式 <Template> 列表片段
每条数据都会展开成两条兄弟节点,来源是手工导入的 Template 列表项。
- done主库切换完成华东集群已接管写流量
- 同一条数据额外展开的第二个兄弟节点
- stable错误率回落5 分钟窗口内恢复到 0.2%
- 同一条数据额外展开的第二个兄弟节点