面试题：Vue 3 Teleport功能如何在复杂布局场景下优化前端开发

Question

假设你正在开发一个大型的前端应用，其中有一个模态框组件，该模态框需要在body标签下渲染以避免层级问题。请结合Vue 3的Teleport功能，详细说明实现思路以及可能遇到的问题和解决方案。

Answer 1

实现思路

1. 创建模态框组件：在Vue 3中，正常创建一个模态框组件，例如Modal.vue。在该组件模板中编写模态框的HTML结构、样式以及交互逻辑。
2. 使用Teleport：在Modal.vue组件中，通过Teleport将模态框的DOM结构移动到body标签下。示例代码如下：

<template>
  <Teleport to="body">
    <div class="modal">
      <!-- 模态框内容 -->
      <h2>模态框标题</h2>
      <p>模态框正文内容</p>
      <button @click="closeModal">关闭</button>
    </div>
  </Teleport>
</template>

<script setup>
import { ref } from 'vue';

const closeModal = () => {
  // 关闭模态框逻辑
};
</script>

<style scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

这样就确保了模态框在body标签下渲染，避免了因组件层级嵌套过深导致的样式和显示问题。

可能遇到的问题及解决方案

1. 样式隔离问题：由于模态框被移动到body下，其样式可能会受到全局样式的影响，并且原本的作用域样式（scoped）可能不再完全生效。
   • 解决方案：可以使用CSS Modules，为模态框组件创建单独的样式模块，确保样式的唯一性。或者在全局样式中使用更具体的选择器来避免冲突，例如.modal h2，而不是简单的h2。
2. 事件冒泡和捕获问题：模态框在body下，其事件冒泡和捕获路径可能与预期不同，特别是与父组件之间的交互。
   • 解决方案：在模态框组件内部，通过$emit自定义事件来与父组件通信，而不是依赖事件冒泡。同时，在处理事件时，要注意事件的捕获和冒泡阶段，合理使用stopPropagation来控制事件的传播。
3. 组件挂载和销毁时机：模态框移动到body下后，其挂载和销毁的生命周期可能会有一些微妙的变化。
   • 解决方案：仔细测试组件的挂载和销毁逻辑，利用Vue 3的生命周期钩子函数（如onMounted、onUnmounted）来确保在正确的时机执行相关操作，例如初始化插件、清理定时器等。