Vue2和Vue3在v-for遍历时ref获取dom节点的区别是什么
更新时间：2023-11-15
前言：
Vue是一款流行的前端开发框架，通过使用Vue可以快速构建响应式的Web应用程序。Vue2是Vue的旧版本，而Vue3是Vue的最新版本，两者在某些方面有一些不同。在使用Vue2和Vue3中，都可以使用v-for指令来遍历数组或对象，并使用ref来获取对应的DOM节点。然而，在v-for遍历时ref获取DOM节点方面，Vue2和Vue3有一些区别，下面将详细解答这一问题。
一、Vue2中v-for遍历时ref获取DOM节点的使用方法
在Vue2中，可以通过给DOM元素添加ref属性来获取DOM节点的引用。在使用v-for指令遍历数组或对象时，如果需要获取遍历后每个DOM节点的引用，可以使用ref属性和ref指令。
示例：
<template>
<div>
<ul>
<li v-for="(item, index) in list" :key="index" ref="itemRefs"></li>
</ul>
</div>
</template>
上面的示例中，通过v-for指令遍历list数组，并使用ref指令给每个li元素添加ref属性，可以通过this.$refs.itemRefs来获取到每个li元素的引用。
二、Vue3中v-for遍历时ref获取DOM节点的使用方法
在Vue3中，可以使用新的Composition API来获取DOM节点的引用。在使用v-for指令遍历数组或对象时，如果需要获取遍历后每个DOM节点的引用，可以使用ref()函数来创建一个ref对象，并在模板中使用ref属性绑定这个ref对象。
示例：
<template>
<div>
<ul>
<li v-for="(item, index) in list" :key="index" :ref="el => itemRefs.push(el)"></li>
</ul>
</div>
</template>
<script>
import {ref, onMounted} from 'vue';
export default {
setup() {
const itemRefs = ref([]);
// 在组件挂载时，可以访问到所有的li元素引用
onMounted(() => {
console.log(itemRefs);
});
return {
itemRefs
};
}
}
</script>
上面的示例中，使用ref()函数创建一个ref对象itemRefs，并通过箭头函数绑定ref属性，将每个li元素的引用添加到itemRefs数组中。通过onMounted钩子函数，可以在组件挂载时打印itemRefs数组，从而获取到所有li元素的引用。
三、Vue2和Vue3在v-for遍历时ref获取DOM节点的区别
在v-for遍历时ref获取DOM节点方面，Vue2和Vue3有一些区别：
1. 使用方式不同：
- Vue2：在Vue2中，可以使用ref指令给DOM元素添加ref属性，直接在this.$refs中访问获取到的DOM节点引用。
- Vue3：在Vue3中，可以使用ref()函数创建一个ref对象，并在模板中使用ref属性绑定这个ref对象，通过获取ref对象的值来获取DOM节点的引用。
2. 引用的获取方式不同：
- Vue2：在Vue2中，通过this.$refs来获取DOM节点的引用，可以直接访问到每个DOM节点的引用。
- Vue3：在Vue3中，通过获取ref对象的值来获取DOM节点的引用，需要通过ref对象的value属性来访问每个DOM节点的引用。
3. 获取时间点不同：
- Vue2：在Vue2中，可以在组件渲染后立即访问获取到的DOM节点引用。
- Vue3：在Vue3中，由于使用的是Composition API，需要在组件挂载后，即在onMounted钩子函数中访问获取到的DOM节点引用。
四、总结
在v-for遍历时ref获取DOM节点方面，Vue2和Vue3有一些区别。Vue2使用ref指令并直接在this.$refs中访问获取到的DOM节点引用，而Vue3使用ref()函数创建ref对象，并通过获取ref对象的值来获取DOM节点的引用。此外，在Vue3中，需要在组件挂载后，在onMounted钩子函数中访问DOM节点引用。这些区别是因为Vue3采用了新的Composition API来取代Vue2中的Options API，以提供更灵活的组合式开发方式。了解这些区别，可以帮助开发者在使用Vue2和Vue3时更好地处理v-for遍历时ref获取DOM节点的问题。 
