手动通过appendChild()添加Vue插槽至DOM时如何保持响应式？

核心原因：插槽VNode的依赖追踪绑定 #

Vue的响应式更新依赖于渲染上下文的依赖收集，插槽的响应式表现差异本质在于：模板中的<slot>会被Vue编译器纳入组件的渲染树，而手动取用this.$slots.default的VNode则脱离了这个追踪体系。

1. 模板中<slot>的特殊处理 #

当Vue编译器解析模板里的<slot>标签时，会生成对应的渲染逻辑，将插槽内容的VNode创建过程与当前组件的渲染周期绑定：

• 组件初始化时，编译器会把插槽的渲染函数注册到组件的渲染上下文，自动收集插槽内部响应式数据的依赖。
• 当响应式数据变化触发组件重新渲染时，Vue会重新执行插槽的渲染函数，生成更新后的VNode，再同步到DOM。

2. 手动使用this.$slots.default的问题 #

this.$slots.default是父组件渲染时生成的VNode快照，仅在父组件重新渲染时才会更新。如果你直接将这些VNode手动挂载到第三方DOM：

• 这些VNode没有被纳入当前子组件的渲染树，子组件的响应式依赖收集机制无法追踪到插槽内部的数据变化。
• 当响应式数据更新时，子组件的重新渲染不会触发插槽VNode的更新，因为它们不在组件的渲染上下文里，自然不会被同步。

3. 为什么<slot v-if="false">能恢复响应式 #

哪怕v-if为false，Vue编译器依然会处理这个<slot>标签：

• 它会保留插槽的渲染逻辑，并将其绑定到组件的渲染上下文，完成依赖收集的注册。
• 当响应式数据变化时，组件重新渲染，会重新执行插槽的渲染函数，更新this.$slots.default的VNode内容。这时候你手动渲染的插槽内容就能拿到最新的VNode，从而恢复响应式。

正确的实现方案 #

不要手动处理VNode挂载，推荐用Vue内置的<teleport>组件直接将插槽内容渲染到第三方DOM：

<template>
  <teleport :to="targetDom">
    <slot></slot>
  </teleport>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const targetDom = ref(null)

onMounted(() => {
  // 获取第三方库创建的DOM元素
  targetDom.value = document.getElementById('third-party-dom')
})
</script>

这种方式既符合Vue的响应式机制，又无需手动处理VNode的更新逻辑。

内容的提问来源于stack exchange，提问作者Dev