vue如何获取一个元素的基本信息

PS：代码全部使用Vue3和setup语法糖来写的

首先准备

HTML结构

<template>
  <div class="main" ref="myElement"></div>
  <t-button @click="onClick"> 点击该元素的相关信息获取 </t-button>
</template>

Vue部分

<script setup>
import { onMounted, ref } from "vue";
const myElement = ref(null);
const onClick = () => {
  console.log('myElement.value.clientWidth='+ myElement.value.clientWidth);
  console.log(myElement);
};
</script>

注意！！！

这里，我们在实验的时候

假如说我们打印是一个myElement.value的形式，我们可以把该元素的DOM结构打印在我们的控制台上，但是我们想查看这元素的基本信息的时候，这里只需要打印这个定义的变量就好，这样一边看一遍获取自己想要的一些信息。