R后悔药 Rue.js
  • 首页
    • 深度指南
    • 实战例子
    • 快速上手
    • 路由指南
    • 术语表
    • 错误代码参考
  • API
    • 合作伙伴
    • 插件
    • 组件库
    • 工具链
    • Text.js
    • 新闻简报
    • 常见问题
    • 团队
    • 版本发布
    • 社区指南
    • 行为规范
    • 隐私政策
  • 赞助
  • 合作伙伴
设置
目录统计
总条目
  • 你好,世界
  • 处理输入
  • Attribute 绑定
  • 条件与循环
  • 表单绑定
  • 简单组件
  • useApp().component 注册
  • Reactive Props Destructure
  • Props 与 useSetup
  • Slots 插槽
  • 原生 Web Components
  • Web Components 分项测试
  • 基础元素与自闭合标签
  • 表达式与插值
  • 属性、className、style 与 Props
  • 对象展开属性(spread props)
  • 条件渲染(?:、&&、null)
  • v-if / r-if 指令
  • v-show / r-show 指令
  • v-pre / r-pre 指令
  • v-once / r-once 指令
  • v-memo / r-memo 指令
  • v-text / r-text 指令
  • v-html / r-html 指令
  • v-on / r-on 指令
  • v-model / r-model 指令
  • 列表渲染与 key
  • v-for / r-for 指令
  • Template 无包装容器
  • Scoped Style 组件作用域样式
  • Fragments(<> … </>)
  • children 插槽与嵌套
  • 组件与 Props 传递
  • 动态组件(Component)
  • Suspense 异步边界
  • 异步组件懒水合
  • 事件处理
  • 受控输入
  • Refs 基础
  • Markdown 编辑器
  • 获取数据
  • 服务端预取
  • 资源
  • 资源(纯 JSX)
  • Rue Islands 总览
  • Island:client:load
  • Island:client:idle
  • Island:client:visible
  • Island:client:media
  • Island:client:interaction
  • Island:client:none
  • Island:client:only
  • Island:安全 Props
  • Island:Manifest Props
  • Island:client:* 编译
  • Context
  • 语言切换(_ 模型)
  • 路由 Demo:总览(嵌套路由)
  • 路由 Demo:守卫(beforeEnter)
  • 路由 Demo:实验页(受守卫保护)
  • 基础计数器
  • shallowRef 浅层 ref
  • triggerRef 手动触发
  • customRef 自定义 ref
  • onActivated 缓存生命周期
  • toRef 响应式句柄
  • toRefs 响应式解构
  • isRef 判定示例
  • isProxy 代理判断
  • isReadonly 判断
  • nextTick 真实业务场景
  • watchPostEffect DOM 读取
  • watchSyncEffect 同步防线
  • onWatcherCleanup 请求清理
  • effectScope 批量停止
  • onScopeDispose 作用域清理
  • getCurrentScope 作用域探针
  • 渲染函数计数器
  • onRenderTracked 调试
  • onRenderTriggered 调试
  • onDeactivated
  • onErrorCaptured 错误捕获
  • useState 计数器
  • 条件渲染
  • map 列表渲染
  • Todo 应用
  • 基础待办事项
  • 本地待办事项
  • 用户资料编辑
  • useState 数组
  • useState 对象
  • 本地 ref 计数器
  • 排序、筛选与网格
  • Store Query Sync 与 URL 状态
  • 树状视图
  • SVG 图表
  • SVG 共享标签命名空间
  • 带过渡动效的模态框
  • Transition mode
  • 子调父方法
  • 父控子计数
  • 组件级 v-model
  • 命名 v-model
  • 组件 emit
  • Hello children
  • 基础 children Box
  • 嵌套 children Box
  • Layout children
  • 过渡动效

Template 内置组件

这个页面改成了显式导入<Template>组件的写法,不再依赖小写 template lowering。
当前示例覆盖命名 slot、<Template v-if>、 <Template v-if / v-else-if / v-else> 和列表片段四种写法,运行时同样不会额外生成包装节点。

切换场景

观察中间两张卡片出现时,网格项数量是否被额外包裹影响。

普通 div 包裹

中间两张卡片会先进入一个额外 grid item。

直接网格项: 3

主看板

Always visible

告警

2 critical

值班

On-call: Mina

审计流

14 events/min

显式 <Template v-if> 条件片段

中间两张卡片通过 Template 指令直接成为兄弟 grid item,不多套一层 DOM。

直接网格项: 4

主看板

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
  • 同一条数据额外展开的第二个兄弟节点
  • 错误率回落
    5 分钟窗口内恢复到 0.2%
    stable
  • 同一条数据额外展开的第二个兄弟节点
页内导航
文档
  • 深度指南
  • 实战例子
  • 快速上手
  • 术语表
  • 错误码参照表
关于
  • 常见问题
  • 团队
  • 版本发布
  • 社区指南
生态
  • 插件
  • 组件库
  • 路由指南
  • Text.js
© 2024-2026 Xiangmin Liu
Rue.JS