面试题：深度剖析 Vue Teleport 与其他类似功能（如 React Portals）的差异及应用场景选择

底层原理

Vue Teleport：Vue 通过 createElement 函数创建虚拟 DOM 节点，并在渲染阶段将 Teleport 包裹的内容移动到指定的目标 DOM 位置。它会在挂载组件时，先正常创建组件的虚拟 DOM，然后在 mounted 钩子中，将组件的真实 DOM 移动到目标位置，同时会更新相关的依赖追踪，确保响应式系统正常工作。
React Portals：React 基于 ReactDOM.createPortal 方法，该方法接收两个参数，一个是要渲染的子元素，另一个是 DOM 容器。React 在渲染时会绕过常规的 DOM 层级限制，直接将子元素渲染到指定的 DOM 容器中。它依赖于 React 的协调算法（reconciliation algorithm），在更新时能够高效地计算出需要更新的部分并应用到 DOM 上。

使用方式

Vue Teleport：在模板中使用 <Teleport to="target">...</Teleport> 标签，to 属性指定目标 DOM 元素的选择器或实际 DOM 元素。例如：

<template>
  <div>
    <Teleport to="#modal-container">
      <div class="modal">
        <p>这是一个模态框内容</p>
      </div>
    </Teleport>
  </div>
</template>

React Portals：在 JavaScript 代码中使用 ReactDOM.createPortal(child, container)，其中 child 是要渲染的 React 元素，container 是目标 DOM 元素。例如：

import ReactDOM from'react-dom';

const Modal = ({ children }) => {
  const el = document.getElementById('modal-container');
  return ReactDOM.createPortal(
    <div className="modal">
      {children}
    </div>,
    el
  );
};

export default Modal;

性能表现

Vue Teleport：由于 Vue 在移动 DOM 时会处理好依赖追踪，性能开销主要在初始渲染和响应式数据变化时的重新渲染。如果目标 DOM 频繁变动，可能会带来一定的性能损耗，但在大多数情况下，Vue 的响应式系统优化能保证较好的性能。
React Portals：React 的协调算法使得在更新 Portal 内容时，能精准计算并更新变化部分，性能较好。但如果 Portal 内容复杂且更新频繁，协调算法的计算量可能会增加，不过 React 的批量更新机制在一定程度上可以缓解这种情况。

生态兼容性

Vue Teleport：与 Vue 生态紧密结合，在 Vue 项目中使用非常方便，能无缝融入 Vue 的组件化开发、指令系统等。但在与其他非 Vue 技术集成时，可能会有一定限制。
React Portals：是 React 生态的一部分，与 React 的其他特性如状态管理、路由等兼容性良好。同样，在与非 React 技术集成时，也可能面临一些挑战。

业务场景选择

模态框/弹窗场景：
- Vue Teleport：适合 Vue 项目中快速创建模态框，利用 Vue 的指令和组件系统，可以方便地控制模态框的显示隐藏、传递数据等。例如一个 Vue 单页应用中的登录弹窗。
- React Portals：在 React 项目中构建模态框，借助 React 的状态管理和组件化，能实现复杂的交互逻辑。如 React 电商应用中的商品详情弹窗。
全局提示场景：
- Vue Teleport：可以轻松将提示组件渲染到页面顶层，避免在组件嵌套过深时出现样式和层级问题，同时利用 Vue 的响应式数据更新提示内容。
- React Portals：同样能将提示内容渲染到指定位置，结合 React 的事件系统，可以灵活控制提示的触发和关闭。例如 React 管理后台中的全局通知。

星途面试题库