<!-- 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)換為真實 DOM            │
│  4. PostFlush 副作用（watch、onMounted等）    │
└─────────────────────────────────────────────┘

<Teleport to="body">
  <div>這段內(nèi)容會被移動到 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 {
      // 立即模式：在當前渲染周期執(zhí)行
      moveTeleportContent(n2, target)
    }
  }
}

// defer 的實現(xiàn)邏輯
if (defer) {
  // 等待當前組件的 patch 完成后
  // 但不等待父組件或瀏覽器的布局計算
  queuePostFlushCb(() => {
    doTeleport()
  })
}

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

// nextTick: 在當前宏任務結束前執(zhí)行
await nextTick()
// 相當于：Promise.resolve().then(fn)

// setTimeout: 在下一個宏任務執(zhí)行
setTimeout(() => {}, 0)
// 相當于：添加到宏任務隊列末尾

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

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

App.vue 渲染
  → operation-container 計算 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 更新隊列
  await nextTick()

  // 2. 驗證目標容器存在
  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>

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

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

// 簡化的源碼邏輯
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)
  }
}

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

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