<!-- GridView.vue -->
<Teleport to="#header-canvas-container">
  <div class="header-content">
    <!-- 表頭內(nèi)容 -->
  </div>
</Teleport>

<!-- App.vue -->
<div class="operation-container">
  <div v-if="isDocx" id="header-canvas-container"/>
</div>

┌─────────────────────────────────────────────┐
│  組件掛載/更新流程                           │
├─────────────────────────────────────────────┤
│  1. Setup 狀態(tài)初始化                         │
│  2. Render 生成 VNode                       │
│  3. Patch 將 VNode 轉(zhuǎn)換為真實(shí) DOM            │
│  4. PostFlush 副作用（watch、onMounted等）    │
└─────────────────────────────────────────────┘

<Teleport to="body">
  <div>這段內(nèi)容會(huì)被移動(dòng)到 body 下</div>
</Teleport>

// Vue 內(nèi)部偽代碼
const Teleport = {
  process(n1, n2, container) {
    const target = document.querySelector(n2.props.to)

    if (n2.props.defer) {
      // defer 模式：延遲到父組件更新完成后
      queuePostRenderEffect(() => {
        moveTeleportContent(n2, target)
      })
    } else {
      // 立即模式：在當(dāng)前渲染周期執(zhí)行
      moveTeleportContent(n2, target)
    }
  }
}

// defer 的實(shí)現(xiàn)邏輯
if (defer) {
  // 等待當(dāng)前組件的 patch 完成后
  // 但不等待父組件或?yàn)g覽器的布局計(jì)算
  queuePostFlushCb(() => {
    doTeleport()
  })
}

┌──────────────────────────────────────────────┐
│  單個(gè)事件循環(huán)（Event Loop）                  │
├──────────────────────────────────────────────┤
│  1. 執(zhí)行宏任務(wù)（Script、setTimeout等）        │
│  2. 執(zhí)行微任務(wù)隊(duì)列（Promise.then、Mutation等） │
│  3. 渲染管線（如果需要渲染）：                 │
│     a. 樣式計(jì)算（Style）                      │
│     b. 布局（Layout）                        │
│     c. 繪制（Paint）                          │
│     d. 合成（Composite）                      │
└──────────────────────────────────────────────┘

// nextTick: 在當(dāng)前宏任務(wù)結(jié)束前執(zhí)行
await nextTick()
// 相當(dāng)于：Promise.resolve().then(fn)

// setTimeout: 在下一個(gè)宏任務(wù)執(zhí)行
setTimeout(() => {}, 0)
// 相當(dāng)于：添加到宏任務(wù)隊(duì)列末尾

時(shí)間線：
0ms  - 開(kāi)始渲染 GridView
10ms - GridView 渲染完成，defer 執(zhí)行
15ms - App.vue 布局穩(wěn)定
20ms - 瀏覽器完成布局計(jì)算

時(shí)間線：
0ms  - 開(kāi)始渲染 GridView
2ms  - GridView 渲染完成，defer 執(zhí)行 ?
3ms  - App.vue 還在計(jì)算布局 ?
5ms  - 瀏覽器完成布局計(jì)算

App.vue 渲染
  → operation-container 計(jì)算 layout
    → header-canvas-container 確定 final position
      → Teleport can successfully attach

// GridView.vue
const shouldTeleport = ref(false)

watch(() => toValue(isDocx), async (newIsDocx) => {
  if (!newIsDocx) {
    shouldTeleport.value = false
    return
  }

  // 1. 等待 Vue 的 DOM 更新隊(duì)列
  await nextTick()

  // 2. 驗(yàn)證目標(biāo)容器存在
  const target = document.querySelector('#header-canvas-container')
  if (!target) {
    console.warn('Teleport target not found')
    return
  }

  // 3. 等待瀏覽器的渲染管線完成
  setTimeout(() => {
    shouldTeleport.value = true
  }, 0)
}, { immediate: true })

<template>
  <Teleport v-if="shouldTeleport && isDocx" to="#header-canvas-container">
    <!-- 內(nèi)容 -->
  </Teleport>
</template>

時(shí)刻 | Vue 狀態(tài)         | 瀏覽器狀態(tài)        | 操作
-----|-----------------|------------------|------------------
T1   | GridView開(kāi)始渲染 |                  | watch觸發(fā)
T2   | 執(zhí)行nextTick     |                  | 等待Vue隊(duì)列
T3   | Vue隊(duì)列完成      | 開(kāi)始布局計(jì)算       | querySelector
T4   |                 | 布局計(jì)算中...      | setTimeout推入隊(duì)列
T5   |                 | 布局完成?         |
T6   |                 | 渲染完成?         |
T7   | shouldTeleport=true|                 | Teleport執(zhí)行?

// Vue 會(huì)自動(dòng)批處理多次狀態(tài)更新
count.value++  // 不會(huì)立即渲染
count.value++  // 不會(huì)立即渲染
name.value = 'new'  // 不會(huì)立即渲染
// ← 這里才統(tǒng)一渲染

// 簡(jiǎn)化的源碼邏輯
process(
  n1: VNode | null,
  n2: VNode,
  container: RendererElement,
  anchor: RendererNode | null
) {
  const targetSelector = n2.props.to
  const target = document.querySelector(targetSelector)

  if (n2.props.defer) {
    // 使用 queuePostRenderEffect 延遲
    queuePostRenderEffect(() => {
      move(n2, target)
    })
  } else {
    // 立即執(zhí)行
    move(n2, target)
  }
}

// 會(huì)觸發(fā) Reflow 的操作
element.offsetHeight  // 讀取布局信息
element.style.height = '100px'  // 修改樣式
element.appendChild(child)  // 修改 DOM 樹

// Reflow 是昂貴的操作，瀏覽器會(huì)批量處理