vue3获取标签元素

在Vue2中，我们获取元素都是通过给元素一个

ref

属性，然后通过

this.$refs.xx

来访问的，但这在Vue3中已经不再适用了。

来看看Vue3中是如何获取元素的吧：

<template>
  <div>
    <div ref="el">div元素</div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
export default {
  setup() {
      // 创建一个DOM引用，名称必须与元素的ref属性名相同
      const el = ref(null)

      // 在挂载后才能通过 el 获取到目标元素
      onMounted(() => {
        el.value.innerHTML = '内容被修改'
      })

      // 把创建的引用 return 出去
      return {el}
  }
}
</script>

获取元素的操作一共分为以下几个步骤：

1. 先给目标元素的 ref 属性设置一个值，假设为 el
2. 然后在 setup 函数中调用 ref 函数，值为 null，并赋值给变量 el，这里要注意，该变量名必须与我们给元素设置的 ref 属性名相同
3. 把对元素的引用变量 el 返回（return）出去

补充：设置的元素引用变量只有在组件挂载后才能访问到，因此在挂载前对元素进行操作都是无效的