在Vue 3中，可以通过几种不同的方式获取ref元素的DOM引用：
- 使用
ref属性和setup函数中的ref函数。 - 使用
onMounted生命周期钩子函数。
以下是一个示例代码：
<template>
<div>
<input ref="inputRef" type="text" />
<button @click="focusInput">Focus Input</button>
</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const inputRef = ref(null);
// 方式1：在setup中使用ref函数
// const inputRef = ref(null);
// onMounted(() => {
// console.log(inputRef.value); // 输入框DOM元素
// });
// 方式2：直接在模板中使用ref属性
// onMounted(() => {
// console.log(inputRef.value); // 输入框DOM元素
// });
const focusInput = () => {
if (inputRef.value) {
inputRef.value.focus();
}
};
return {
inputRef,
focusInput
};
}
};
</script>在这个例子中，我们创建了一个文本输入框和一个按钮。我们使用ref属性为输入框设置了一个引用名称inputRef，然后在setup函数中通过调用ref函数并将其赋值给一个变量来捕获DOM元素的引用。我们还定义了一个方法focusInput，当按钮被点击时，该方法会使输入框获得焦点。
在onMounted生命周期钩子中，我们可以通过inputRef.value访问输入框的DOM元素，并对其执行操作。注意，直到组件挂载之后，我们才能获取到ref引用的DOM元素，因此需要在onMounted钩子中进行。