重生之我在学Vue--第11天 Vue 3 高级特性

重生之我在学Vue–第11天 Vue 3 高级特性

前言

🚀 进阶之路正式开启！前10天我们完成了Vue3基础体系搭建，今天将解锁三大高阶技能：Teleport瞬移组件、Suspense异步边界和自定义指令魔法。这些特性能让你的Vue应用拥有更强大的交互能力和性能表现！

Vue3 官方中文文档传送点： 简介 | Vue.js

📌 今日重点文档：

• Teleport
• Suspense
• 自定义指令

Vue前端成仙之路：Vue 前端成仙之路_野生的程序媛的博客-CSDN博客

GO后端成神之路：Go 后端成神之路_野生的程序媛的博客-CSDN博客

一、Teleport：打破组件层级的瞬移术

1. 什么是Teleport？

解决组件嵌套导致的DOM结构问题，可以将组件内容渲染到任意DOM节点中。就像React的Portal，但更Vue！

经典场景：
• 全局弹窗/模态框
• 全屏Loading
• 通知提示

2. 核心用法

<template>
  <button @click="showModal = true">打开弹窗</button>
  
  <Teleport to="body">
    <div v-if="showModal" class="modal">
      <h3>我是瞬移的弹窗</h3>
      <button @click="showModal = false">关闭</button>
    </div>
  </Teleport>
&l