如何手动克隆一个 VNode？实现组件插槽内容多处渲染的高阶实战-Vue.js-PHP中文网

必须使用 cloneVNode 克隆插槽 VNode，因其保留响应式引用、正确处理 key/ref，并支持插槽多处渲染；直接复用会导致 ref 绑定丢失、更新异常及条件逻辑错误。

如何手动克隆一个 vnode？实现组件插槽内容多处渲染的高阶实战

手动克隆 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 错乱。