Vue2和Vue3在v-for遍历时ref获取dom节点的区别及说明

Vue2和Vue3在v-for遍历时ref获取dom节点的区别主要体现在template的使用方式上。下面我将详细介绍Vue2和Vue3在使用v-for遍历时ref获取dom节点的不同之处：

Vue2中v-for遍历时ref获取dom节点

在Vue2中我们可以使用Vue提供的特殊属性：ref 来获取dom节点。在使用v-for遍历时，我们可以将ref放在循环元素上来获取对应元素的引用。具体实现方式如下所示：

<template>
  <div>
      <div v-for="(item, index) in list" :key="index" :ref="'item'+index">{{$index+1}}、{{item}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['列表1','列表2','列表3']
    }
  },
  mounted() {
    for (let i = 0; i < this.list.length; i++) {
      console.log(this.$refs['item'+i][0].innerText);
    }
  }
}
</script>

在Vue2中，我们需要将ref绑定在循环元素中，同时要注意绑定时要加上冒号。我们可以在mounted函数中遍历整个数组，并通过this.$refs['item'+i][0]来获取对应的dom节点。

Vue3中v-for遍历时ref获取dom节点

在Vue3中，由于template标签已经失效，我们需要使用另外一种方式来获取dom节点引用，那就是使用v-for指令的ref标识符。具体实现方式如下所示：

<template>
  <div>
    <div v-for="(item, index) in list" :key="index" v-ref:item>{{$index+1}}、{{item}}</div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
export default {
  setup() {
    const list = ref(['列表1','列表2','列表3'])

    onMounted(() => {
      for (let i = 0; i < list.value.length; i++) {
        console.log('item'+i+':'+document.getElementById('item'+i).innerText);
      }
    })

    return {
      list
    }
  }
}
</script>

在Vue3中，我们需要将ref绑定在循环元素中，同时在绑定时不需要加上冒号。在mounted改为了onMounted，this.$refs改为了使用document.getElementById来获取dom节点。同时使用vue的ref函数来定义数组。