Vue3 核心特性Suspense 与 Teleport 原理解析

// 编译前模板
<teleport to="#modal">
  <div class="dialog">...</div>
</teleport>
// 编译后虚拟DOM
{
  type: TeleportImpl,
  props: { to: '#modal' },
  children: [/* dialog VNode */]
}

// runtime-core/src/components/Teleport.ts
function render(
  vnode: VNode,
  container: RendererElement,
  anchor: RendererNode | null
) {
  if (disabled || !target) {
    // 普通模式渲染
    mountChildren(vnode, container, anchor)
  } else {
    // 传送模式
    mountChildren(vnode, target, anchor)
  }
}

// 伪代码实现
class Suspense {
  constructor() {
    this.deps = new Set()
    this.isResolved = false
  }
  register(promise) {
    this.deps.add(promise)
    promise.finally(() => {
      this.deps.delete(promise)
      this.checkStatus()
    })
  }
  checkStatus() {
    if (this.deps.size === 0 && !this.isResolved) {
      this.resolve()
    }
  }
}

<!-- 动态传送目标 -->
<teleport :to="targetSelector">
  <notification :message="msg"/>
</teleport>
<script setup>
const targetSelector = computed(() => 
  isMobile.value ? '#mobile-root' : '#desktop-root'
)
</script>
<!-- 条件禁用传送 -->
<teleport :to="isFullscreen ? null : '#modal'">
  <video-player/>
</teleport>

<template>
  <Suspense @pending="logLoading" @resolve="logLoaded" @fallback="showSpinner">
    <!-- 多异步依赖 -->
    <AsyncComponentA />
    <AsyncComponentB />
    <template #fallback>
      <div class="complex-loading">
        <ProgressBar :progress="progress"/>
        <RetryButton v-if="hasError"/>
      </div>
    </template>
  </Suspense>
</template>
<script setup>
const progress = ref(0)
const loadResource = async () => {
  const steps = 5
  for (let i = 0; i < steps; i++) {
    await fetchChunk(i)
    progress.value = ((i + 1) / steps) * 100
  }
}
</script>

// 动态销毁示例
const modalVisible = ref(false)
watch(modalVisible, (val) => {
  if (!val) {
    // 手动清理残留节点
    const container = document.querySelector('#modal')
    container.innerHTML = ''
  }
})

// 使用AbortController防止过时响应
let controller: AbortController
const fetchData = async () => {
  controller?.abort()
  controller = new AbortController()
  try {
    const res = await fetch('/api', {
      signal: controller.signal
    })
    // 处理响应
  } catch (e) {
    if (e.name !== 'AbortError') {
      // 处理真实错误
    }
  }
}