VueUse中窗口大小改变（Window Resize）的实用技巧与应用场景

terry 1个月前 (04-21) 阅读数 41 #Vue

在现代Web开发中,页面的响应式设计至关重要，当用户调整浏览器窗口大小时，我们希望页面能够自适应地呈现出最佳的布局和效果，Vue.js作为一款流行的前端框架，为我们提供了便捷的开发方式，而VueUse这个强大的Vue.js实用函数库，更是在处理诸如窗口大小改变这类常见需求时，有着出色的表现，咱们就来深入探讨一下VueUse中关于窗口resize的相关内容，看看它能给我们的开发带来哪些便利和惊喜。

VueUse简介

VueUse是一个专门为Vue.js开发者打造的函数库，它包含了众多实用的函数和组合式API，可以帮助我们轻松处理各种常见的前端开发任务，比如处理DOM操作、响应式数据处理、动画效果等等，它的设计理念就是让开发者能够以更简洁、高效的方式编写Vue.js应用程序，减少重复代码的编写，提高开发效率。

VueUse中处理窗口Resize的基础用法

在VueUse中,处理窗口大小改变主要是通过 useWindowSize 这个函数来实现的。

我们需要在Vue组件中引入 useWindowSize：

import { useWindowSize } from '@vueuse/core';

在组件的 setup 函数中，我们可以像这样使用它：

export default {
  setup() {
    const { width, height } = useWindowSize();
    return {
      width,
      height
    };
  }
};

通过上述代码,我们就可以在组件中轻松获取到当前浏览器窗口的宽度和高度了，这里获取到的 width 和 height 是响应式的，这意味着当用户调整窗口大小时，它们的值会自动更新，我们可以在模板中直接使用这些变量来实现一些基于窗口大小的动态效果，比如根据窗口宽度改变某个元素的样式：

<template>
  <div :style="{ fontSize: width < 600? '12px' : '16px' }">
    这段文字的字体大小会根据窗口宽度改变哦
  </div>
</template>

在这个例子中,当窗口宽度小于600px时，文字的字体大小会变为12px，否则就是16px，这样就实现了一个简单的响应式布局效果。

结合计算属性实现更复杂的响应式布局

仅仅根据窗口的宽度和高度来直接设置样式可能还不够灵活,这时候，我们可以结合Vue.js的计算属性来实现更复杂的响应式布局。

假设我们有一个页面,在不同的窗口大小下，需要显示不同数量的列，比如窗口较宽时，显示三列内容；窗口较窄时，显示两列内容，我们可以这样来实现：

import { useWindowSize } from '@vueuse/core';
import { ref, computed } from 'vue';
export default {
  setup() {
    const { width } = useWindowSize();
    const columnCount = ref(2);
    const calculatedColumnCount = computed(() => {
      if (width.value >= 800) {
        return 3;
      } else {
        return 2;
      }
    });
    return {
      calculatedColumnCount
    };
  }
};

在上述代码中,我们首先获取了窗口的宽度，然后定义了一个 columnCount 变量作为初始的列数，通过计算属性 calculatedColumnCount，根据窗口宽度的值来动态计算应该显示的列数，我们可以在模板中使用这个计算属性来渲染相应数量的列内容，从而实现了一个更加智能、灵活的响应式布局效果。

在组件生命周期中处理窗口Resize事件

除了上述直接获取窗口大小并进行响应式处理的方式之外,我们有时候可能还需要在组件的生命周期中对窗口大小改变事件进行更细致的处理。

当窗口大小改变时,我们可能需要重新加载一些数据或者重新初始化某些组件的状态，在VueUse中，我们可以利用 onMounted 和 onBeforeUnmount 这两个生命周期钩子函数来实现。

import { useWindowSize, onMounted, onBeforeUnmount } from '@vueuse/core';
export default {
  setup() {
    const { width, height } = useWindowSize();
    let resizeHandler;
    onMounted(() => {
      resizeHandler = () => {
        // 在这里可以编写窗口大小改变时需要执行的具体操作
        console.log('窗口大小改变了，当前宽度：', width.value, '，当前高度：', height.value);
      };
      window.addEventListener('resize', resizeHandler);
    });
    onBeforeUnmount(() => {
      window.removeEventListener('resize', resizeHandler);
    });
    return {
      width,
      height
    };
  }
};

在上述代码中,当组件挂载时，我们通过 onMounted 函数添加了一个窗口大小改变的事件监听器 resizeHandler，在这个监听器中，我们可以编写任何我们需要在窗口大小改变时执行的操作，比如重新获取数据、更新组件状态等，当组件即将卸载时，我们通过 onBeforeUnmount 函数移除了这个事件监听器，以避免内存泄漏等问题。

应用场景举例

自适应图片展示：在一个图片展示页面，当窗口大小改变时，我们可以根据新的窗口尺寸来调整图片的大小和布局，窗口变窄时，可以将图片从横向排列改为纵向排列，并且适当缩小图片的尺寸，以保证页面的整体美观和可读性。
响应式导航栏：对于网站的导航栏，我们可以根据窗口大小来决定是否显示某些菜单项或者改变菜单项的样式，在小窗口下，将一些次要的菜单项隐藏起来，只显示主要的几个菜单项，并且可以将导航栏的样式改为更加紧凑的形式，以节省空间。
数据可视化仪表盘：在数据可视化的仪表盘应用中，当窗口大小改变时，我们可能需要重新计算图表的尺寸、布局和数据的展示方式，窗口变小时，可以将一些不太重要的图表隐藏起来，或者将多个图表合并为一个更紧凑的图表，以确保在有限的空间内能够清晰地展示最重要的数据。

通过对VueUse中窗口resize相关功能的深入探讨,我们可以看到它为我们在Vue.js应用程序中处理窗口大小改变这一常见需求提供了非常便捷、高效的解决方案，无论是实现简单的响应式布局效果，还是处理更复杂的组件生命周期中的事件响应，以及在各种实际应用场景中的灵活运用，VueUse都展现出了它的强大之处，在今后的Vue.js开发中，我们可以充分利用这些功能，打造出更加美观、实用且具有良好用户体验的Web应用程序，希望大家在实际开发中能够多多尝试和运用这些技巧，让自己的项目更加出色。