vue2和vue3获取dom元素

Vue 2 和 Vue 3 中获取 DOM 元素的方法比较
使用 getElementById 获取 DOM 元素高度
在 Vue 应用程序中，可以直接利用原生 JavaScript 的 document.getElementById() 函数来访问特定 ID 的 DOM 节点并读取其尺寸数据。例如，在模板内定义了一个具有唯一标识符 "myDiv" 的 div 后，可以在脚本部分这样写：
let height = document.getElementById('myDiv').offsetHeight;
登录后复制
这种方法适用于任何版本的 Vue，并不依赖框架本身的特性[^1]。
利用 $refs 引用机制
对于更集成的方式，则推荐采用 Vue 提供的响应式 API——即通过设置组件或 HTML 标签上的 ref 特性来进行引用绑定。这允许开发者以一种声明式的风格轻松定位页面中的任意节点而不必担心命名冲突等问题。
Vue 2 实现方式
当处于 Vue 2 环境下时，只需简单地向目标元素附加一个名为 ref 的自定义属性，并赋予独一无二的名字作为标记；之后便能在实例上下文中经由 this.$refs.<your-ref-name> 访问到对应的真实 DOM 对象及其所有公开接口成员。
<div ref="myDiv">Hello, world!</div>
登录后复制
随后就可以像下面这样做：
// 假设当前是在 methods 或生命周期钩子里执行这段代码
console.log(this.$refs.myDiv.offsetHeight);
登录后复制
此模式不仅限于静态测量工作，还支持动态更新后的即时反馈处理。
Vue 3 改进之处
进入 Vue 3 新时代以后，虽然核心概念保持一致，但在语法糖衣之下隐藏着不少优化改进措施。最显著的变化之一就是引入 Composition API 取代 Options API 成为主要编程范式的同时也增强了对组合逻辑的支持力度。因此现在创建 refs 更加灵活多变，甚至能够跨越多个层次结构传递下去而不会丢失关联关系。
考虑这样一个场景：有一个父级容器包裹了一系列带有交互行为的小部件（如菜单项），此时如果想要批量控制这些子项目的显示状态或者收集它们各自的布局参数怎么办？借助新的 setup 函数配合 reactive/reactiveToRefs 就能实现高效管理复杂 UI 组件间的数据流交换过程[^2]。
具体来说，先按照常规套路指定好各处所需的 ref 名字，再利用 provide/inject 功能将共享资源暴露出来供后代子孙们享用。这样一来无论嵌套多么深都能确保一致性体验不受影响。
<!-- 子组件 -->
<template>
<div class="icon-box">
<!-- ...其他无关紧要的内容... -->
<div class="menu-box"
v-for="(item, index) in iconMenus"
:key="index"
@click="clickItem(item)"
ref="menuItemRefs">
...
</div>
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
name: 'MenuItem',
});
</script>
登录后复制
而在父组件这边则负责初始化以及分发必要的配置选项给各个独立单元使用：
setup() {
const menuItemRefs = ref([]);

onMounted(() => {
nextTick().then(() => {
console.log(menuItemRefs.value.map(el => el.offsetHeight));
});
});

return {
clickItem,
menuItemRefs // 把这个数组提供出去让子组件挂载自己的 dom 上去
};
}
登录后复制
这里值得注意的是，由于现代浏览器渲染管线的缘故，有时直接操作 DOM 并不能立即看到预期效果，所以最好搭配 nextTick 宏任务调度器一起等待重绘完成后再做下一步动作。
综上所述，无论是 Vue 2 还是升级版 Vue 3 都提供了多种途径让用户方便快捷地抓取所需视图片段的信息，只不过后者凭借更加现代化的设计理念进一步简化了开发流程提升了生产力效率。