必须使用 cloneVNode 克隆插槽 VNode，因其保留响应式引用、正确处理 key/ref，并支持插槽多处渲染；直接复用会导致 ref 绑定丢失、更新异常及条件逻辑错误。
手动克隆 VNode 的核心是调用 cloneVNode，但它不是简单“复制对象”，而需理解其设计意图：保留响应式引用、正确处理 key 和 ref、适配插槽重用场景。尤其在实现插槽内容多处渲染（如同时在 header、main、footer 渲染同一插槽）时，必须克隆而非直接复用，否则会触发 Vue 的节点复用机制异常或响应失效。
为什么不能直接复用插槽 VNode？
Vue 中的 VNode 是带响应式上下文的轻量对象。一个插槽 VNode（如 slots.default?.() 返回的）内部持有对作用域数据的闭包引用、父组件的 setupContext、以及可能的 ref 绑定。若将同一 VNode 对象多次插入不同位置（如 [vnode, vnode, vnode]），Vue 会认为这是同一节点的多次挂载，导致：
- 后续更新只响应最后一次挂载的位置
-
ref只绑定到最后一个实例，前两个丢失引用 - 如果 VNode 含有
v-if或动态 key，复用会破坏条件逻辑
正确克隆：用 cloneVNode 并传入新 props
cloneVNode 是 Vue 提供的官方安全克隆方法（位于 vue 包中），它会深拷贝 VNode 的结构属性，同时保留响应式连接，并允许覆盖 props、key、ref 等关键字段：
import { cloneVNode } from 'vue'
// 假设从插槽拿到原始 vnode
const slotVNodes = slots.default?.() || []
// 克隆三份，每份赋予独立 key 和可选 props
const cloned1 = cloneVNode(slotVNodes[0], { key: 'header', class: 'slot-header' })
const cloned2 = cloneVNode(slotVNodes[0], { key: 'main', class: 'slot-main' })
const cloned3 = cloneVNode(slotVNodes[0], { key: 'footer', class: 'slot-footer' })
return () => [
h('header', cloned1),
h('main', cloned2),
h('footer', cloned3)
]
注意：key 必须唯一且稳定（避免用 index），否则 Vue 无法区分多个克隆体；ref 若需分别绑定，应在每个 cloneVNode 调用中单独传入函数或 ref 对象。
高阶技巧：封装多处渲染插槽的组合式函数
为复用逻辑，可封装一个 useClonedSlots 工具函数，支持按区域名批量克隆并注入定制 props：
import { cloneVNode, isVNode } from 'vue'
export function useClonedSlots(slots, regions = ['default']) {
return regions.reduce((acc, region) => {
const vnodes = slots[region]?.() || []
acc[region] = vnodes.map((vnode, i) =>
isVNode(vnode)
? cloneVNode(vnode, { key: `${region}-${i}` })
: vnode
)
return acc
}, {})
}
// 在 setup 中使用
const cloned = useClonedSlots(slots, ['default', 'aside'])
return () => [
h('main', cloned.default),
h('aside', cloned.aside)
]
该函数自动处理非 VNode 类型（如字符串、number），并确保每个克隆体拥有语义化 key，避免 diff 错乱。
避坑提醒：别用 JSON.parse(JSON.stringify()) 或浅拷贝
VNode 是含有函数、Symbol、响应式代理、内部标记（如 _isVNode: true）的复杂对象：
-
Object.assign({}, vnode)会丢失原型链和响应式连接 -
JSON.stringify会丢弃函数、undefined、Symbol、Proxy 实例 → 渲染失败或无响应 - 直接解构
{ ...vnode }不会复制type、props内部的响应式属性
务必只使用 cloneVNode —— 它是 Vue 内部专为此场景设计的健壮 API。
