vue3动态ref存储dom对象（vue动态数据）

在 Vue 3 中， ref 可以用来创建一个响应式的引用变量来持有一个 DOM 元素，组件实例或任何响应式的值。要动态获取 DOM 元素，你通常会在模板中使用 ref 属性，并在 JavaScript 中定义一个与之对应的 ref 引用。当 Vue 组件被挂载到 DOM 时，这个引用就会被自动设置为对应的 DOM 元素。

下面是一个如何使用 ref 来获取 DOM 元素的示例：

<template>

<div v-for="item in items" :key="item.id" :ref="setDomRef(item.id)">

{{ item.text }}

</div>

</template>

<script setup>

import { ref, onMounted } from 'vue';

const items = ref([{ id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' }]);

const domRefs = ref({});

// 设置 DOM 引用

const setDomRef = (id) => {

return (el) => {

if (el) {

domRefs.value[id] = el;

}

};

};

// 使用 onMounted 生命周期钩子来访问 DOM

onMounted(() => {

console.log(domRefs.value); // 将包含所有的 DOM 元素引用

});

</script>

在这个例子中：

使用 v-for 来遍历 items 数组，并为每个项目创建一个 <div> 元素。

将 ref 属性设置为调用 setDomRef(item.id) ，这是一个函数，它返回另一个函数，该函数接受 DOM 元素作为参数并将其存储在 domRefs 对象中，健是每个项目的 id 。

在 onMounted 钩子中，你可以访问 domRefs 对象，这时它将包含所有的 DOM 元素引用。

通过这种方式动态设置 ref ，你可以根据需要引用任意数量的 DOM 元素，并在 JavaScript 中以一个对象的形式方便地访问它们。