vue3中使用ref获取dom的操作代码

在Vue 3中，你可以使用ref来获取DOM元素的引用。ref是一个响应式且可重用的引用对象，它允许你访问Vue组件中的DOM元素。以下是如何在Vue 3中使用ref获取DOM元素的基本步骤：

1. 定义一个ref： 在组件的setup()函数中定义一个ref，使用Vue的ref()函数。

2. 在模板中使用ref： 在模板中，使用ref属性将DOM元素与定义的ref关联起来。

3. 访问ref： 在组件的逻辑中，你可以访问这个ref来获取DOM元素。

下面是一个简单的示例：

<template>
  <div>
    <input type="text" ref="myInput" />
    <button @click="focusInput">Focus Input</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 定义一个ref
    const myInputRef = ref(null);

    // 访问DOM元素的方法
    const focusInput = () => {
      // 使用.value访问DOM元素
      if (myInputRef.value) {
        myInputRef.value.focus();
      }
    };

    // 返回ref以便在模板中使用
    return {
      myInputRef,
      focusInput,
    };
  },
};
</script>

在这个示例中，我们定义了一个ref叫做myInputRef，它被用来获取模板中的<input>元素。我们还定义了一个focusInput方法，当按钮被点击时，这个方法会被调用，并且使用myInputRef.value来获取DOM元素并调用它的focus()方法。

请注意，ref在Vue 3中是首选的方式来访问DOM元素，因为它是响应式的，并且与Vue的组合式API紧密集成。如果你需要在组件的生命周期钩子中访问DOM元素，你可以在onMounted或onUpdated等钩子中访问ref。