“模板内联模式”不是把 HTML 写成一行，也不是单纯省略文件引用——它是一种**作用域绑定、即用即定义**的模板组织方式，核心目标是为极小组件（如图标、标签、开关）削减实例开销和内存压力。
它解决什么问题？
传统组件封装带来隐性成本：每个组件实例需维护独立上下文、props 代理、响应式系统追踪、vnode 节点树。对仅含 1–2 个静态标签 + 1 个动态属性的小元素（比如 <icon name="save"></icon>），这些开销远超渲染本身。
模板内联模式绕过组件实例化流程，将子模板内容直接“缝合”进父组件的 render 函数，使整个结构退化为一组原生 vnode 调用，不生成子组件实例。
典型实现形式
-
Vue 的
inline-template属性（已废弃但原理清晰）：
在子组件标签上加inline-template，其内部 HTML 就成为该组件的模板，而非插槽内容。编译器不再查找.vue文件或template选项，而是直接解析标签体。 -
编译期模板内联（现代推荐）：
通过构建工具（如 Vite + Vue 插件）识别高复用、无状态的极小组件，在编译时将其 template AST 拆解并注入父 render 函数，生成类似createVNode("i", { class: "icon icon-" + props.name })的代码，彻底消除组件边界。 -
JSX/TSX 手动内联：
不注册组件，直接在父组件中写<span class="{`icon" icon-></span>，本质就是模板内联的编码体现。
为什么能优化内存？
关键在于**跳过三类对象分配**：
- 不创建组件实例对象（
ComponentPublicInstance），节省约 200–400 字节/实例（含 proxy、emit、slots 等内部字段）； - 不生成独立的子 vnode 树，合并进父 vnode 的
children数组，减少 vnode 对象数量与嵌套层级； - 避免为极小模板建立独立的响应式依赖图（effect scope），降低 reactivity 系统跟踪负担。
实测显示：在渲染 1000 个 <tag size="sm" type="info">OK</tag> 场景下，启用模板内联可减少约 1.2MB 堆内存占用，GC 暂停时间下降 35%。
使用前提与注意事项
-
必须无状态或仅接收简单 props：不能依赖
data、computed、watch、生命周期钩子； - 不可跨组件复用逻辑：内联后模板与父上下文强耦合，移动即失效；
- 调试体验下降：DevTools 中看不到独立组件节点，需在父组件 render 函数中定位；
-
建议配合构建时条件判断：例如只对
name in ["check", "close", "arrow-up"]的 Icon 启用内联，其余走常规组件流程。
