vue3 ref获取dom元素（超详细）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在前端开发中，直接操作 DOM 元素是一个常见需求，例如实现元素滚动、表单验证、动态样式修改等场景。在 Vue 3 中，开发者可以通过 ref 属性与组合式 API 轻松获取 DOM 元素的引用。本文将从基础概念出发，结合代码示例和实际案例，深入讲解如何在 Vue 3 中通过 ref 获取 DOM 元素，并探讨其背后的原理与最佳实践。无论是编程新手还是有一定经验的开发者，都能通过本文掌握这一核心技能。

一、理解 Vue 3 中的 ref 与 DOM 获取

在 Vue 3 中，ref 是一个功能强大的工具，它既可以用于定义响应式数据，也可以直接指向 DOM 元素。这里需要区分两种用途：

• 响应式数据 ref：通过 import { ref } from 'vue' 定义的变量，用于存储可响应的值（如数字、对象等）。
• DOM 元素 ref：通过模板中的 ref 属性绑定到 DOM 元素，用于在组件中直接引用该元素。

比喻解释：ref 是 DOM 元素的“快递员”

想象 ref 是一个快递员，负责将 DOM 元素从模板“快递”到 JavaScript 代码中。当开发者在模板中给某个元素添加 ref="myElement" 时，就相当于在该元素上贴上一个“快递单”，告诉 Vue：“请把这个元素通过 ref 传递给我！”

二、获取 DOM 元素的步骤与代码示例

以下是获取 DOM 元素的完整流程，包含代码示例：

1. 在模板中绑定 ref 属性

在需要引用的 DOM 元素上添加 ref 属性，并指定一个唯一的名称：

<template>
  <div ref="myDivElement">这是一个需要获取的 div 元素</div>
</template>

2. 在组件中通过 this.$refs 或组合式 API 获取引用

传统选项式 API（Classical Options API）

在选项式 API 中，可以通过 this.$refs 访问元素：

export default {
  mounted() {
    console.log(this.$refs.myDivElement); // 输出 DOM 元素对象
  },
};

组合式 API（Composition API）

在 setup() 函数中，需要使用 ref() 函数定义一个响应式变量来存储引用：

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

const myDivElement = ref(null);

onMounted(() => {
  console.log(myDivElement.value); // 输出 DOM 元素对象
});
</script>

关键点说明

• 在组合式 API 中，myDivElement 是一个 Ref 对象，实际的 DOM 元素存储在 myDivElement.value 中。
• 初始时，myDivElement.value 的值为 null，因为 DOM 元素在组件挂载前可能尚未渲染完成。

3. 实际案例：实现“滚动到顶部”按钮

通过一个完整案例，演示如何结合 ref 实现滚动功能：

<template>
  <div ref="contentSection">  
    <!-- 长内容区域 -->
    <button @click="scrollToTop">返回顶部</button>
  </div>
</template>

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

const contentSection = ref(null);

const scrollToTop = () => {
  if (contentSection.value) {
    contentSection.value.scrollTop = 0;
  }
};

onMounted(() => {
  console.log('DOM 元素已就绪:', contentSection.value);
});
</script>

案例解析

• 当用户点击按钮时，调用 scrollToTop() 方法。
• 通过检查 contentSection.value 是否为 null，确保元素已正确挂载。
• 使用 element.scrollTop = 0 将滚动条位置重置为顶部。

三、注意事项与常见问题

1. 为什么 ref.value 可能为 null？

• DOM 渲染时机：如果在组件挂载前（如 setup() 中的非生命周期钩子阶段）访问 ref.value，此时元素尚未渲染，返回 null。
• 条件渲染：如果元素被 v-if 或 v-show 控制，且条件未满足时，元素可能不存在。

解决方案：在 onMounted 生命周期中操作

onMounted(() => {
  // 此时 DOM 已渲染完成
  contentSection.value.style.color = 'red';
});

2. 如何获取多个 DOM 元素？

可以通过为每个元素分配唯一 ref 名称，或使用数组形式的 ref：

<div ref="item1">元素1</div>
<div ref="item2">元素2</div>

const item1 = ref(null);
const item2 = ref(null);

3. 直接操作原生 DOM 是否安全？

Vue 推荐通过响应式数据驱动视图更新，而非直接操作 DOM。但在某些场景（如第三方库集成）下，ref 是必要的。关键原则：

• 避免频繁直接修改 DOM 属性，优先使用 Vue 的响应式系统。
• 确保在 onMounted 或 onUpdated 钩子中操作元素，避免未渲染完成的错误。

四、进阶技巧与优化

1. 结合 watch 监听 DOM 变化

如果需要在响应式数据变化时操作 DOM，可以使用 watch：

import { ref, watch } from 'vue';

const elementHeight = ref(0);
const targetElement = ref(null);

watch(elementHeight, (newVal) => {
  if (targetElement.value) {
    targetElement.value.style.height = `${newVal}px`;
  }
});

2. 使用 nextTick 确保 DOM 更新

当 Vue 的响应式数据变化后，DOM 可能尚未立即更新。此时可以使用 nextTick：

import { ref, nextTick } from 'vue';

const updateAndScroll = async () => {
  // 更新数据
  data.someValue = 'new value';
  
  await nextTick(); // 等待 DOM 更新完成
  if (contentSection.value) {
    contentSection.value.scrollTop = 100;
  }
};

3. 复杂场景：表格行高亮

通过 ref 实现点击表格行时高亮当前行：

<template>
  <div>
    <table>
      <tr v-for="(row, index) in rows" :key="index" :ref="el => { if (el) rowElementRefs[index] = el }">
        <td @click="highlightRow(index)">{{ row.content }}</td>
      </tr>
    </table>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const rows = ref([{ content: 'Row 1' }, { content: 'Row 2' }]);
const rowElementRefs = ref([]);

const highlightRow = (index) => {
  if (rowElementRefs.value[index]) {
    rowElementRefs.value[index].style.backgroundColor = 'yellow';
  }
};
</script>

技巧解析

• 使用 :ref="回调函数" 动态存储多个元素引用。
• 通过索引直接操作目标行元素。

五、对比 Vue 2 与 Vue 3 的 ref 差异

六、常见问题解答

Q1：如何获取第三方库（如 D3.js）的 DOM 元素？

A：通过 ref 获取元素后，直接传递给库的方法：

const chartContainer = ref(null);

onMounted(() => {
  const chart = d3.select(chartContainer.value);
  // 继续使用 D3 操作元素
});

Q2：为什么 ref 在 setup() 中无法直接使用 this.$refs？

A：在组合式 API 中，setup() 内部没有 this 上下文，需改用 ref() 函数定义变量。

Q3：如何避免内存泄漏？

A：在组件卸载时（onBeforeUnmount），移除所有对 DOM 元素的引用或事件监听：

import { onBeforeUnmount } from 'vue';

onBeforeUnmount(() => {
  // 移除事件监听或清理资源
});

结论

通过本文，读者应掌握了 Vue 3 中 ref 获取 DOM 元素的核心方法与最佳实践。从基础用法到复杂场景，再到性能优化，开发者可以灵活运用这一工具实现丰富的交互功能。记住：Vue 的核心是响应式数据驱动视图，而 ref 是连接数据与原生 DOM 的桥梁。建议读者通过实际项目不断练习，逐步掌握更高级的技巧，例如结合动画库或实现复杂的 DOM 操作逻辑。

掌握 vue3 ref获取dom元素 的核心原理后，开发者可以更自信地应对前端开发中的各种挑战，无论是构建单页应用、动态组件，还是与第三方库深度集成，都能游刃有余。