如何在Vue中监听窗口大小变化的事件

在 Vue 中，你可以使用 @resize 监听窗口大小变化的事件。这个事件是 Vue 提供的自定义修饰符，用于绑定在 window 对象的 resize 事件上。

下面是一个示例，说明如何在 Vue 组件中监听窗口大小变化的事件：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=3b2e25e269df494f90670f3caf52de1c

在这个示例中，我们在组件的 mounted 钩子函数中添加了对 resize 事件的监听，并在 beforeUnmount 钩子函数中移除了事件监听器，以防止内存泄漏。

当窗口大小变化时，handleResize 方法会被调用，将当前窗口的宽度赋值给 windowWidth 数据属性。这样，你就可以在模板中使用 windowWidth 变量来显示当前窗口的宽度。

请注意，为了避免监听器被重复添加，我们在 beforeUnmount 钩子函数中移除了事件监听器。确保在组件销毁之前删除不再需要的事件监听器是一个良好的实践。

另外，你也可以使用第三方库如 Vue Resize 或 Vue-Apexcharts 来更方便地处理窗口大小变化的事件。这些库提供了额外的功能和特性，用于处理各种窗口大小变化的需求。