在vue3的setup函数中获取组件根元素

在Vue3的setup函数中，可以通过ref函数获取组件根元素。ref函数可以将一个普通的JavaScript值转换为响应式对象。

例如，如果组件的根元素是一个div标签，可以在setup函数中这样获取它：

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const root = ref(null)

    onMounted(() => {
      console.log(root.value) // 输出组件根元素
    })

    return {
      root
    }
  }
}

在上面的代码中，我们通过ref函数创建了一个名为root的响应式对象，并将其初始值设置为null。然后，我们在onMounted钩子函数中访问root.value属性，这会返回组件的根元素。由于这个值是响应式的，如果组件根元素发生变化，它将自动更新。

在模板中，我们可以像这样访问root对象：

<template>
  <div ref="root">
    <!-- 组件内容 -->
  </div>
</template>