vue3页面加载完成后怎么获取宽度、高度

# Vue3页面加载完成后怎么获取宽度、高度

在Vue3中，我们经常需要在页面加载完成后获取某个元素的宽度和高度，以便进行一些动态布局或动画效果。本文将介绍如何在Vue3中实现这一功能。

## 1. 使用`ref`和`onMounted`钩子

Vue3提供了`ref`和`onMounted`钩子，可以方便地在页面加载完成后获取元素的宽度和高度。

### 1.1 创建`ref`

首先，我们需要在模板中使用`ref`来引用目标元素：

```vue
<template>
  <div ref="myElement">这是一个元素</div>
</template>

1.2 在onMounted钩子中获取宽度和高度

接下来，在onMounted钩子中，我们可以通过ref获取元素的宽度和高度：

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

export default {
  setup() {
    const myElement = ref(null);

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

    return {
      myElement,
    };
  },
};
</script>

1.3 解释

• ref用于创建一个响应式引用，并将其绑定到模板中的元素。
• onMounted钩子在组件挂载完成后执行，此时可以安全地访问DOM元素。
• offsetWidth和offsetHeight分别返回元素的宽度和高度，包括内边距和边框。

2. 使用ResizeObserver监听元素尺寸变化

如果你需要在元素尺寸发生变化时获取宽度和高度，可以使用ResizeObserver。

2.1 创建ResizeObserver

首先，创建一个ResizeObserver实例，并在回调函数中处理尺寸变化：

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

export default {
  setup() {
    const myElement = ref(null);
    let observer = null;

    onMounted(() => {
      if (myElement.value) {
        observer = new ResizeObserver(entries => {
          for (let entry of entries) {
            const { width, height } = entry.contentRect;
            console.log(`宽度: ${width}, 高度: ${height}`);
          }
        });
        observer.observe(myElement.value);
      }
    });

    onUnmounted(() => {
      if (observer) {
        observer.disconnect();
      }
    });

    return {
      myElement,
    };
  },
};
</script>

2.2 解释

• ResizeObserver用于监听元素尺寸的变化。
• onUnmounted钩子在组件卸载时执行，用于清理ResizeObserver，避免内存泄漏。

3. 总结

在Vue3中，获取页面加载完成后的元素宽度和高度非常简单。通过ref和onMounted钩子，我们可以在组件挂载后立即获取元素的尺寸。如果需要监听元素尺寸的变化，可以使用ResizeObserver。这些方法可以帮助我们更好地控制页面布局和动画效果。

希望本文对你有所帮助！如果你有任何问题或建议，欢迎在评论区留言。 “`

这篇文章详细介绍了如何在Vue3中获取页面加载完成后的元素宽度和高度，并提供了代码示例和解释。希望对你有帮助！