vue3获取遍历的dom元素

在 Vue3 中，可以使用 `v-for` 指令来遍历数组或对象，并通过 `ref` 函数来获取遍历的 DOM 元素。具体步骤如下：

1. 在模板中使用 `v-for` 指令来遍历数组或对象，并使用 `ref` 函数定义一个引用，例如：

<template>
  <div v-for="(item, index) in items" :key="index" :ref="el => itemsRefs[index] = el">
    {{ item }}
  </div>
</template>

在上面的例子中，我们使用 `v-for` 指令来遍历 `items` 数组，并将遍历的每个元素的 DOM 引用存储到 `itemsRefs` 数组中，以便后续使用。

2. 在组件中使用 `reactive` 函数来定义一个响应式对象，例如：

import { reactive } from 'vue';

export default {
  setup() {
    const items = reactive([1, 2, 3]);
    const itemsRefs = [];

    return {
      items,
      itemsRefs
    };
  }
};

在上面的例子中，我们使用 `reactive` 函数来定义一个响应式对象 `items`，并定义一个数组 `itemsRefs`，用于存储遍历的每个元素的 DOM 引用。

3. 在需要获取遍历的 DOM 元素的地方，可以通过 `itemsRefs` 数组来获取对应的 DOM 元素，例如：

import { onMounted } from 'vue';

export default {
  setup(props, { refs }) {
    const items = reactive([1, 2, 3]);
    const itemsRefs = [];

    onMounted(() => {
      console.log(itemsRefs); // 输出遍历的每个元素的 DOM 引用
    });

    return {
      items,
      itemsRefs
    };
  }
};

在上面的例子中，我们在 `onMounted` 钩子函数中使用 `itemsRefs` 数组来获取遍历的每个元素的 DOM 引用，并进行操作。