在Vue3开发中，经常会遇到需要在页面加载完成后获取元素宽度和高度的需求。这在很多场景下都十分关键，比如动态布局调整、根据元素大小进行特定操作等。

我们要明确在Vue3中，生命周期钩子函数起着重要作用。在页面加载完成后执行操作，我们可以使用onMounted钩子函数。这个函数会在组件挂载完成后调用，此时DOM已经渲染完毕，我们就可以放心地获取元素的宽度和高度了。

假设我们有一个简单的Vue3组件，模板部分定义了一个div元素，我们想要获取它的宽度和高度：

<template>
  <div ref="targetDiv">这是一个需要获取宽高的div</div>
</template>

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

const targetDiv = ref(null);

onMounted(() => {
  if (targetDiv.value) {
    const width = targetDiv.value.offsetWidth;
    const height = targetDiv.value.offsetHeight;
    console.log(`宽度: ${width}, 高度: ${height}`);
  }
});
</script>

在这段代码中，我们首先使用ref定义了一个targetDiv，用于引用模板中的div元素。在onMounted钩子函数中，我们检查targetDiv.value是否存在，确保元素已经正确挂载。然后，通过offsetWidth和offsetHeight属性分别获取元素的宽度和高度，并将其打印到控制台。

除了offsetWidth和offsetHeight，还有clientWidth和clientHeight属性。offsetWidth和offsetHeight包含了元素的内容区、内边距和边框的宽度和高度；而clientWidth和clientHeight只包含内容区和内边距的宽度和高度，不包含边框。根据实际需求，我们可以选择合适的属性来获取准确的宽高信息。

另外，如果要获取页面视口的宽度和高度，可以使用window.innerWidth和window.innerHeight。这在处理响应式布局和页面适配时非常有用。

掌握在Vue3页面加载完成后获取宽度和高度的方法，能够让我们更好地控制页面元素的布局和行为，为用户带来更优质的交互体验。无论是简单的信息展示还是复杂的动态布局，这些技巧都能助力我们高效完成开发任务。