一文搞懂Vue3中如何使用ref获取元素节点？

在Vue 3中，可以使用ref函数来创建一个响应式引用，该引用可以用来获取DOM元素的节点。首先需要从vue包中引入ref函数，然后在组件的setup函数中使用它来创建引用，并在模板中通过ref属性绑定到DOM元素上。

下面是一个简单的例子：

<template>
  <div>
    <input ref="inputRef" type="text">
    <button @click="focusInput">Focus Input</button>
  </div>
</template>
 
<script>
import { ref, onMounted } from 'vue';
 
export default {
  setup() {
    // 创建一个ref引用
    const inputRef = ref(null);
 
    // 定义一个方法来聚焦输入框
    const focusInput = () => {
      if (inputRef.value) {
        inputRef.value.focus();
      }
    };
 
    // 在组件挂载后立即聚焦输入框
    onMounted(focusInput);
 
    // 返回响应式引用和方法，以便在模板中使用
    return {
      inputRef,
      focusInput
    };
  }
};
</script>

在上面的例子中，我们创建了一个名为inputRef的响应式引用，并通过ref="inputRef"将其绑定到<input>元素上。在setup函数中，我们定义了一个focusInput方法，当按钮被点击时，该方法会被触发，并使用inputRef.value来访问输入元素并调用focus()方法。最后，我们使用onMounted生命周期钩子来在组件挂载后自动聚焦输入框。