本文详解如何在 vue 3 composition api 中正确使用 `ref` 获取 v-for 渲染的 dom 元素位置，解决 tooltip 动态定位问题，避免 `this.$refs` 的错误用法，并提供可运行的 typescript 实践方案。
在 Vue 3 的
✅ 正确做法是：
- 将 ref 命名为复数形式（如 chatTooltips），并用 ref([]) 初始化为空数组；
- 在 v-for 中绑定该 ref（Vue 会自动将每个匹配元素推入数组）；
- 点击时传入当前用户索引 i，通过 chatTooltips.value[i] 获取对应 DOM 节点；
- 调用 getBoundingClientRect() 获取精确坐标（支持响应式更新）。
以下是修正后的完整可运行示例（含 TypeScript 类型安全）：
? 关键注意事项：
立即学习“前端免费学习笔记（深入）”；
- ref 在 v-for 中必须命名唯一且语义清晰（如 chatTooltips），不可与单个 ref 混用；
- 初始 ref([]) 是必须的，否则 chatTooltips.value 为 undefined，访问 .length 或索引会报错；
- 使用 @mouseenter + @mouseleave 替代 @click 更符合“悬停显示 Tooltip”的交互直觉；
- getBoundingClientRect() 返回的是相对于视口（viewport）的坐标，若页面滚动需结合 window.scrollY 补偿（本例假设固定布局）；
- 若需 Tooltip 跟随鼠标移动，可监听 @mousemove 并实时更新 left/top，但注意性能（建议节流）。
? 进阶建议：
- 对于复杂定位（如边界检测、自动翻转方向），推荐封装为 useTooltipPosition() 自定义 Hook；
- 可结合 v-show 或 Transition 实现淡入动画提升体验；
- 生产环境建议对 chatTooltips.value[index] 做存在性校验（el?.getBoundingClientRect?.()），避免 SSR 渲染异常。
通过以上方式，你不仅能精准控制 Tooltip 位置，还能写出符合 Vue 3 最佳实践、类型安全、易于维护的响应式代码。
