vue3中获取ref元素的几种方式

在Vue 3中，可以通过几种不同的方式获取ref元素的DOM引用：

1. 使用ref属性和setup函数中的ref函数。
2. 使用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钩子中进行。