Vue循环渲染组件中touchstart监听器的最优实现方案探讨

一、子组件绑定500个@touchstart监听器是否可行？ #

完全可行，不会产生明显性能问题：

• 现代浏览器对事件监听器的优化已非常成熟，500个同类型监听器属于极低量级开销，远达不到影响页面流畅度的阈值。
• Vue模板中绑定的事件监听器会在组件卸载时自动销毁，切换页面加载新句子时，旧的word-component会被自动清理，不会造成内存泄漏。
• 如果子组件的doTouchStart逻辑简单，直接绑定在子组件上是实现成本最低的方案。

二、父组件绑定触摸事件时，如何高效识别目标子组件？ #

你当前用document.elementFromPoint的方式卡顿，主要是因为频繁调用DOM API且逻辑冗余，推荐以下两种更高效的方案：

方案1：事件委托+closest定位子组件 #

给word-component的根元素添加统一类名（比如word-item），父组件监听touchstart和drag事件，通过事件对象的target快速定位目标子组件：

// parent 父组件
<template>
  <div class='parser-wrap' 
       @touchstart="onTouchStart"
       v-touch:drag="onDrag">    
    <template v-for="(word, wid) in sentence" :key="childId(wid)">
      <word-component 
         :id="childId(wid)" 
         :is-hovering="hoveredId === childId(wid)" 
         :word="word"></word-component>
    </template>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const hoveredId = ref(null)

const onTouchStart = (e) => {
  // 找到最近的word-item元素
  const wordEl = e.target.closest('.word-item')
  hoveredId.value = wordEl?.id || null
}

const onDrag = (e) => {
  // 拖拽时获取触摸位置，定位元素
  const { clientX, clientY } = e.touches[0]
  const wordEl = document.elementFromPoint(clientX, clientY)?.closest('.word-item')
  hoveredId.value = wordEl?.id || null
}
</script>

// word-component 子组件
<template>
  <span class="word-item" :id="id" v-html="output(word)"></span>
</template>

这种方式的优势：

• 仅需父组件绑定2个事件监听器，完全避免子组件重复绑定的开销。
• closest是高效的DOM查找API，比遍历ref集合或多次调用elementFromPoint更快。
• 用单个hoveredId变量管理状态，减少响应式依赖，避免500个子组件各自监听不同状态导致的重渲染开销。

方案2：结合Vue Refs快速定位子组件实例 #

如果需要直接操作子组件的方法或属性，可以给每个子组件绑定ref，通过ref集合快速匹配：

// parent 父组件
<template>
  <div class='parser-wrap' 
       @touchstart="onTouchStart"
       v-touch:drag="onDrag">    
    <template v-for="(word, wid) in sentence" :key="childId(wid)">
      <word-component 
         :id="childId(wid)" 
         :ref="el => el && (wordRefs[childId(wid)] = el)"
         :word="word"></word-component>
    </template>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const wordRefs = ref({})
const hoveredId = ref(null)

const onTouchStart = (e) => {
  const wordEl = e.target.closest('.word-item')
  if (wordEl) {
    hoveredId.value = wordEl.id
    // 直接调用子组件的方法（比如显示浮窗）
    wordRefs.value[hoveredId.value]?.showTooltip()
  }
}

// drag逻辑同方案1
</script>

额外优化建议 #

• 子组件添加重渲染控制：通过defineProps的shallowRef或自定义shouldUpdate钩子，仅当isHovering或word变化时才重渲染，避免不必要的性能消耗。
• 拖拽时优化elementFromPoint调用：可以设置节流（比如每100ms调用一次），减少DOM查询频率，提升流畅度。

内容的提问来源于stack exchange，提问作者Gazzer