Vue 监听窗口变化的常见方法·这是最常见的方法·我们可以在 Vue 的生命周期钩子中添加和移除监听器

作者：编程小白 | 发布时间：2025-07-09 |

Vue 监听窗口变化的三种常见方法

在 Vue 开发中，我们需要根据窗口大小的变化来调整视图，以下是一些常用的方法：

一、使用 window.addEventListener('resize', callback)

这是最常见的方法，使用 JavaScript 的 `addEventListener` 来监听窗口变化。我们可以在 Vue 的生命周期钩子中添加和移除监听器。

例如：

```javascript mounted() { window.addEventListener('resize', this.handleResize); }, beforeDestroy() { window.removeEventListener('resize', this.handleResize); } ```

二、使用 Vue 的生命周期钩子函数 mounted 进行初始化设置

在组件挂载时设置监听器，确保组件的生命周期内都能响应窗口变化。

```javascript mounted() { this.initWindowSize(); window.addEventListener('resize', this.handleResize); }, methods: { initWindowSize() { // 初始化窗口尺寸 }, handleResize() { // 窗口大小改变时的处理 } } ```

三、使用 Vue 的计算属性 computed 动态更新视图

计算属性可以根据依赖的变化自动更新。我们可以将窗口尺寸的变化与计算属性结合起来，实现动态视图更新。

```javascript computed: { isMobile() { return window.innerWidth <= 768; } } ```

四、实例说明

以下是一个简单的 Vue 组件示例，根据窗口大小调整显示内容：

```vue ```

五、原因分析和数据支持

监听窗口变化对现代 Web 开发至关重要，以下是一些原因和数据支持：

原因 数据支持
响应式设计需求 Statista 数据显示，超过 50% 的网页流量来自移动设备
性能优化 避免不必要的 DOM 操作，动态加载或卸载组件
用户体验 确保用户在不同设备上获得一致的体验

六、总结和建议

Vue 监听窗口变化的主要方法包括使用 `addEventListener`、在 `mounted` 生命周期钩子中进行初始化设置，以及利用计算属性动态更新视图。

进一步的建议包括：