Vue.js中获取屏幕三种方法它通常能满足大多数需求每种方法都有其优缺点开发者可以根据实际需求选择合适的方法

作者：网络发烧程序猿 | 发布时间：2025-06-27 |

Vue.js中获取屏幕高度的三种方法

在Vue.js中，你可以通过以下几种方法来获取屏幕的高度：

使用 window.innerHeight
使用 window.screen.height
使用Vue生命周期钩子

一、使用window.innerHeight

这个方法可以简单直接地获取当前窗口的视口高度，单位是像素。它通常能满足大多数需求。

二、使用window.screen.height

这个属性返回的是整个屏幕的高度，包括任务栏或工具栏的高度。这可能在某些特殊情况下很有用。

三、使用Vue生命周期钩子

在Vue组件中，你可以利用生命周期钩子，比如 mounted，来获取屏幕高度，并在组件加载完成后动态获取最新的屏幕高度。

四、对比分析

方法	优点	缺点
window.innerHeight	简单易用，获取视口高度	不包括任务栏或工具栏高度
window.screen.height	获取整个屏幕高度	包含了任务栏或工具栏高度，不适用于所有场景
Vue生命周期钩子	动态获取最新高度，适应变化	需要额外的事件监听和移除操作

五、实例说明

假设我们有一个需要根据屏幕高度来调整布局的组件，以下是如何使用这些方法来动态获取并应用屏幕高度：

使用 mounted 钩子来获取初始屏幕高度
在窗口大小变化时（例如，通过监听 resize 事件），更新屏幕高度

示例代码如下：

mounted() {


  this.screenHeight = window.innerHeight;


},


methods: {


  handleResize() {


    this.screenHeight = window.innerHeight;


  }


},


created() {


  window.addEventListener('resize', this.handleResize);


},


beforeDestroy() {


  window.removeEventListener('resize', this.handleResize);


}

Vue.js中获取屏幕高度的方法主要有三种：1. 使用 window.innerHeight，2. 使用 window.screen.height，3. 使用Vue生命周期钩子。每种方法都有其优缺点，开发者可以根据实际需求选择合适的方法。结合Vue的响应式特性和生命周期钩子，确保在屏幕尺寸变化时能够动态更新高度信息，从而提升用户体验。