Vue3技术疑问：无需ref()或document.querySelector()即可访问DOM元素？

这不是Vue的特性，也不是Bug，而是浏览器的原生历史行为——浏览器会自动将页面中带有ID属性的DOM元素挂载到window对象上，作为全局可访问的属性，所以你能直接通过ID名称调用到对应的DOM节点。

为什么不推荐这么做？ #

• 容易引发全局变量冲突：如果你的代码中声明了和ID同名的变量，会出现覆盖或被覆盖的情况，导致难以排查的Bug
• 不符合Vue的开发范式：Vue官方推荐使用ref绑定DOM元素，这种方式更清晰，也不会造成全局污染

Vue官方推荐的正确写法 #

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

// 声明ref绑定DOM元素
const customEl = ref(null);

onMounted(() => {
  // 通过ref的value属性访问DOM节点
  customEl.value.innerText = "Hello";
});
</script>

<template>
  <div ref="customEl">Hi</div>
</template>

总结 #

虽然浏览器原生支持直接通过ID访问DOM，但在Vue项目里尽量遵循官方规范使用ref，避免潜在的兼容性和代码维护问题。

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