Vue3中如何合并多个ref元素为新响应式变量？

针对你这种需要统一管理多个元素Ref的场景，最简洁高效的方案是用单个数组/对象类型的Ref来收纳所有元素，配合模板中的函数式Ref完成绑定，避免定义大量独立的Ref变量。

方案1：数组式收纳（适合批量同类型元素） #

如果不需要给每个元素指定明确标识，用数组Ref是最省事的选择：

<script setup>
import { ref, onMounted } from 'vue'

// 定义一个数组类型的响应式变量
const elements = ref([])

onMounted(() => {
  // DOM挂载完成后，即可统一操作所有元素
  elements.value.forEach(el => {
    console.log('元素内容:', el.textContent)
    el.style.color = '#2c3e50'
  })
})
</script>

<template>
  <!-- 用函数式Ref将每个元素存入数组 -->
  <h1 ref="el => el && elements.value.push(el)">标题1</h1>
  <h1 ref="el => el && elements.value.push(el)">标题2</h1>
  <h1 ref="el => el && elements.value.push(el)">标题3</h1>
</template>

方案2：对象式收纳（适合需要精准定位单个元素） #

如果需要通过名称快速访问特定元素，用对象Ref更直观：

<script setup>
import { ref, onMounted } from 'vue'

// 定义一个对象类型的响应式变量
const elements = ref({})

onMounted(() => {
  // 直接通过键名访问目标元素
  console.log('第一个标题元素:', elements.value.el1)
  elements.value.el2.style.color = '#e74c3c'
})
</script>

<template>
  <!-- 给每个元素指定唯一键名，存入对象 -->
  <h1 ref="el => el && (elements.value.el1 = el)">标题1</h1>
  <h1 ref="el => el && (elements.value.el2 = el)">标题2</h1>
  <h1 ref="el => el && (elements.value.el3 = el)">标题3</h1>
</template>

关键说明 #

• 函数式Ref会在元素挂载时传入DOM对象，卸载时传入null，所以加el &&的判断可以避免存入无效值。
• 必须在onMounted钩子中访问元素，确保DOM已经渲染完成。
• 两种方案都符合Vue响应式规范，后续可以直接通过elements.value统一操作所有元素，代码更整洁易维护。

内容的提问来源于stack exchange，提问作者amir tbi