QIntersection 组件会自动管理可见性状态（不需要您手动添加和处理），并且还可以选择性地添加显示/隐藏过渡效果。它构建在与 Intersection 指令 和 useIntersection composable 相同的引擎之上：这三者按配置共享同一个 Intersection Observer，因此即使有很长的 QIntersection 列表，滚动依然轻量。
QIntersection 最大的好处在于，它会从 DOM 树中释放不可见的节点，从而使用最少的内存，让页面运行非常流畅。此外，您还可以通过 tag 属性指定包装元素的标签以匹配您的需求，从而减少额外的 DOM 节点。
在底层，它使用 Intersection Observer API。
用法
在大多数情况下，您需要为 QIntersection 元素应用 CSS，以便在内部内容未渲染时充当必要的占位。这样可以保证平滑的滚动体验，否则滚动会出现不规则的跳动。
这类 CSS 可以是固定高度或至少是最小高度（可能还需要固定宽度，如下面的示例所示，其中多个 QIntersection 可以在同一行显示）。
如果使用了 transition 属性，内容必须且只能被包裹在一个元素中。
基础
过渡效果
在下面的示例中，我们使用了 Quasar 过渡效果。有关完整列表，请查看过渡效果页面。
仅触发一次
使用仅触发一次意味着您将失去释放 DOM 树的优势。无论元素是否可见，内容都将保留在 DOM 中。之后如果把 once 重新设为 false（例如在 HMR 时编辑了模板），会重新开始观察。
自定义根元素
默认情况下，可见性是相对于浏览器视口来判断的。root 属性会改用某个祖先元素作为视口，当你希望 margin 从该元素的边缘开始度量、或该元素本身预期就处于屏幕外（例如一个稍后才被展现的滚动面板）时，这正是你想要的。
无障碍访问 v2.25+
屏幕外的内容是真正被卸载的（而非仅仅隐藏），因此在无障碍树中也正确地不存在。请注意包裹元素本身始终会渲染，所以如果你通过 tag 属性使用了地标性或其他语义化元素，这些语义即使在内部内容被卸载时也会生效。