14.2.2 实现 Teleport 组件

} else if (typeof type === 'object' && type.__isTeleport) {
  // 组件选项中存在 __isTeleport 标识 → 是 Teleport 组件
  // 调用它的 process 函数，把控制权交接出去
  // 第五个参数是渲染器的一些内部方法
  type.process(n1, n2, container, anchor, {
    patch,
    patchChildren,
    unmount,
    move(vnode, container, anchor) {
      insert(
        vnode.component
          ? vnode.component.subTree.el // 移动一个组件
          : vnode.el,                  // 移动普通元素
        container,
        anchor
      )
    }
  })
}

const Teleport = {
  __isTeleport: true,
  process(n1, n2, container, anchor, internals) {
    // 通过 internals 取得渲染器的内部方法
    const { patch, patchChildren, move } = internals

    if (!n1) {
      // 挂载
      // 获取容器（挂载点）：字符串当选择器，否则直接当容器元素
      const target =
        typeof n2.props.to === 'string'
          ? document.querySelector(n2.props.to)
          : n2.props.to

      // 把 n2.children 渲染到指定挂载点（注意：不是 container，而是 target）
      n2.children.forEach(c => patch(null, c, target, anchor))
    } else {
      // 更新
      // 1. 更新子节点
      patchChildren(n1, n2, container)

      // 2. to 变化时，内容需要换容器
      if (n2.props.to !== n1.props.to) {
        const newTarget =
          typeof n2.props.to === 'string'
            ? document.querySelector(n2.props.to)
            : n2.props.to
        // 把子节点逐个移动到新容器
        n2.children.forEach(c => move(c, newTarget))
      }
    }
  }
}

const trigger = ref(false)

const CompVNode = {
  type: Teleport,
  // 以普通 children 的形式代表被 Teleport 的内容
  props: { to: 'body' },
  children: [
    { type: 'h1', children: 'Title' },
    { type: 'p', children: 'pppp' }
  ]
}

setTimeout(() => {
  trigger.value = !trigger.value
}, 2000)

effect(() => {
  renderer.render(
    trigger.value
      ? { ...CompVNode, props: { to: 'body' } }
      : { ...CompVNode, props: { to: '#app' } },
    document.querySelector('#app')
  )
})