关于在 Vue3 中获取 DOM 标签

在 Vue3 中获取 DOM 标签主要通过 ref 属性实现，以下是详细步骤和示例：

---

基础用法（Composition API）

<template>
  <!-- 在模板中绑定 ref -->
  <input type="text" ref="myInput">
  <div ref="myDiv">这是一个 div</div>
</template>

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

// 1. 声明与 ref 同名的响应式变量
const myInput = ref(null)
const myDiv = ref(null)

onMounted(() => {
  // 3. 在 onMounted 生命周期后访问 DOM
  console.log(myInput.value) // 输入框的 DOM 元素
  console.log(myDiv.value)   // div 的 DOM 元素

  // 操作 DOM：聚焦输入框
  myInput.value.focus()
})
</script>

---

选项式 API（Options API）

<template>
  <input type="text" ref="myInput">
</template>

<script>
export default {
  mounted() {
    // 通过 this.$refs 访问
    this.$refs.myInput.focus()
  }
}
</script>

---

动态 ref 或循环中的 ref

<template>
  <!-- 动态 ref 名称 -->
  <div :ref="(el) => setDynamicRef(el)"></div>

  <!-- 循环中的 ref -->
  <ul>
    <li v-for="item in list" :ref="(el) => addToRefs(el)">
      {{ item }}
    </li>
  </ul>
</template>

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

const dynamicRef = ref(null)
const list = ref(['A', 'B', 'C'])
const itemRefs = ref([])

// 动态设置 ref
const setDynamicRef = (el) => {
  dynamicRef.value = el
}

// 收集循环中的 ref
const addToRefs = (el) => {
  if (el) itemRefs.value.push(el)
}
</script>

---

注意事项

1. 生命周期时机：确保在 onMounted 或之后访问 ref.value，否则可能为 null。
2. TypeScript 类型：指定具体元素类型以获得类型提示：

   const myInput = ref<HTMLInputElement | null>(null)
   

3. 组件 ref：如果 ref 绑定到子组件，获取的是组件实例，需通过 expose 暴露方法。

---

通过以上方法，你可以在 Vue3 中安全地获取和操作 DOM 元素。