ref获取for循环元素会一直触发？

Question

如题，今天遇到个问题，如下图，为什么我移动鼠标到Span上面会触发listDom？本来想说把它单拎出来发上来，结果发现单拎出来的没发现会触发，但是在我开发环境中，移上去就一直触发输出，有哪些可能的原因？

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <span
      v-for="item in dateOptions"
      :key="item.value"
      :ref="listDom"
      :data-value="item.value"
      class="check_date"
      @mouseover="checkDateHandle"
      >{{ item.label }}</span>
    <Button @click="removeStyle()">点击清除样式</Button>
  </div>
</template>

<script>
.....

    let resultList = [];
    // 模板中ref的名称，必须和变量名相同，且动态的ref必须使用箭头函数的方式
    let i = 0;
    const listDom = (e) => {
      // console.log(e)
      // resultList.value.push(e);
      resultList.push(e);
      console.log(e, ++i);
    };
.....

</script>

-----不使用回调函数-----

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <span
      v-for="item in dateOptions"
      :key="item.value"
      ref="listDoms"
      :data-value="item.value"
      class="check_date"
      @mouseover="checkDateHandle"
      >{{ item.label }}</span>
    <Button @click="removeStyle()">点击清除样式</Button>
  </div>
</template>

<script>
.....
setup(){
    const { proxy } = getCurrentInstance();
    let resultList = ref([]);
    onMounted(() => {
      //为什么此处输出为空的{}
      console.log(proxy.$refs);

    })
}

   
.....

</script>

Answer 1

checkDateHandle做了什么?是不是修改了data，rerender之后就重新触发listDom了