VueJS 如何在窗口大小发生变化时获取窗口大小

在 VueJS 中，您可以通过多种方式来监听窗口大小的变化，并获取窗口的尺寸。下面我将详细解释其中一种常用的方法，并给出相应的示例代码。

方法：使用 window 的 resize 事件

在 Vue 组件中，您可以使用 JavaScript 的 resize 事件来监听窗口大小的变化。这个事件会在窗口大小改变时触发。您可以在 Vue 组件的 mounted 钩子中添加事件监听，并在 beforeDestroy 钩子中移除监听，以防内存泄露。

示例代码：

vue
<template>
  <div>
    <h1>当前窗口宽度：{{ windowWidth }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      windowWidth: window.innerWidth
    };
  },
  methods: {
    handleResize() {
      // 更新窗口宽度
      this.windowWidth = window.innerWidth;
    }
  },
  mounted() {
    // 在组件挂载后，添加 resize 事件监听
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    // 在组件销毁前，移除 resize 事件监听
    window.removeEventListener('resize', this.handleResize);
  }
};
</script>

<style>
/* 你的样式代码 */
</style>

解释：

1. 数据定义：在 data 函数中定义了 windowWidth 数据属性，用于存储当前窗口的宽度。

2. 方法定义：handleResize 方法用于更新 windowWidth 的值为当前窗口的宽度。

3. 事件监听和移除：

   • 在 mounted 钩子函数中，我们使用 addEventListener 向 window 对象添加了 resize 事件的监听，并指定 handleResize 作为事件处理函数。
   • 在 beforeDestroy 钩子函数中，我们使用 removeEventListener 移除之前添加的 resize 事件监听，这是防止内存泄漏的重要步骤。

通过以上方法，您的 Vue 应用能够实时响应浏览器窗口大小的变化，并在页面上显示当前的窗口宽度。这种技术在制作响应式布局或需要根据窗口大小动态调整内容的应用中非常有用。