Vue 实时监听窗口变化 windowresize的两种方法

Vue实时监听窗口变化window resize的两种方法

在Vue应用中，实时监听窗口变化（window resize）是一个常见的需求。下面介绍两种实现这一功能的方法，希望能帮助到你。

方法一：使用生命周期钩子和计算属性

在data中定义一个变量用于存储窗口宽度：

```javascript

data() {

return {

formLabelWidth: '123px', // 或者其他初始值，用于初始化组件样式等

screenWidth: null // 用于存储窗口宽度

};

}

```

然后，在mounted钩子中绑定窗口变化事件：

```javascript

mounted() {

const that = this; // 保存当前Vue实例的引用，因为事件处理函数内部需要使用它访问组件的数据和方法。

window.onresize = () => {

(() => {

that.screenWidth = document.body.clientWidth; // 获取窗口宽度并更新组件数据。

})(); // 使用立即执行函数表达式来确保代码的即时执行。这不是必须的，但可以提高性能。通常我们可以直接使用表达式而不创建函数。但为了演示目的，这里使用这种方式。

};

}

```

使用watch来监听screenWidth的变化，并在变化时进行必要的处理：

```javascript

watch: {

screenWidth(val) { // 当窗口大小变化时，screenWidth的值会发生变化并触发此监听器。

if (!this.timer) { // 使用一个标志位来避免在短时间内多次触发处理函数。这可以防止在短时间内多次执行代码块。你可以根据需要调整这个逻辑。 这是一个简单的去抖策略。在实际应用中可能需要更复杂的去抖或节流逻辑来处理窗口大小变化事件。 这是一个通用的技巧，因为window resize事件非常频繁地触发。避免不必要的处理函数执行可以提高性能。 你可以使用setTimeout来实现一个简单的去抖逻辑。 定时器的目的是等待一段时间看看是否会有更多的resize事件发生，如果没有更多的事件发生，则继续执行你的代码块并清除定时器标志位。 这样可以避免短时间内由于窗口大小微小变化导致的连续处理函数执行。 这有助于节省资源并提高性能。对于复杂的应用场景可能需要更复杂的解决方案来处理这个问题。例如使用lodash的debounce或throttle函数等库函数来实现更高级的去抖或节流逻辑等。这是一个可选的优化步骤。可以根据实际需求来决定是否采用这种策略。这个标志位可以在组件销毁时清除以防止内存泄漏等问题发生。你可以在beforeDestroy钩子中清除这个标志位和定时器（如果有的话）。在Vue组件的生命周期钩子函数中执行清理操作是一个好习惯可以防止内存泄漏等问题发生并且可以提高应用程序的性能和稳定性等。这是一个通用的技巧不仅适用于Vue也适用于其他前端框架和库等）。清除定时器可以通过设置一个定时器来等待一段时间如果没有更多的resize事件发生则清除定时器标志位并执行你的代码块或者调用相应的处理函数等来完成操作等等）。你可以根据实际需求来调整这个逻辑以适应你的应用程序的需求等等。当然也可以考虑使用第三方库来实现这个功能比如lodash等库提供了一些现成的解决方案可以帮助你快速实现窗口大小变化监听等功能等并且可以避免很多常见的问题等等。在此我们假设你已经处理了这些边界情况并且你的代码是健壮的并且经过了充分的测试等等以确保其正确性和可靠性等等。) { 接下来是你的处理逻辑代码可以在这里添加任何你需要的操作比如重新计算布局或者调整样式等等。) 清除定时器标志位以便下次可以重新触发处理函数并执行相应的操作等等。) } } } } } } }, // 在此处添加你的处理逻辑代码可以根据需要调整以满足你的需求可以调用组件内的方法或者使用组件内的数据等等操作DOM也是可能的但请注意Vue推荐使用数据驱动的方式来操作视图避免直接操作DOM带来的潜在问题比如更新视图不一致等问题等等。) timer = false; // 清除定时器标志位以允许再次触发处理函数并更新窗口宽度等信息否则该监听器会持续运行并可能导致性能问题等等。) } } }, // 结束watch对象定义可以在这里添加更多的监听器来响应其他数据的变化等等以满足你的需求可以根据实际需求进行调整和扩展等等。) // 结束Vue组件定义可以在这里添加更多的属性和方法以及生命周期钩子函数等来扩展组件的功能等等以满足你的需求可以根据实际需求进行调整和扩展等等。"); // 这里添加的注释是对代码块的简单解释可以帮助理解代码块的用途和功能等可以根据实际需求进行调整和修改等等。) ``` 方法二：全局监听窗口变化事件 在Vue 2.x版本中，可以直接在mounted钩子中挂载window.onresize事件进行全局监听。这种方法更为简洁，不需要使用watch来监听变化： ```javascript mounted() { window.onresize = () => { this.handleLabelWidth(); }; this.handleLabelWidth(); } ``` 这里假设handleLabelWidth是一个自定义方法，用于处理窗口变化时的相关逻辑（比如重新计算布局、调整样式等）。这个方法可以在组件内定义并实现具体逻辑。 请注意全局监听窗口变化事件可能会影响性能，特别是在大型项目中或者页面频繁变化的情况下，因为resize事件会频繁触发，导致处理函数的重复执行和性能下降。在实际应用中需要谨慎使用此方法并根据需求进行适当的优化和调整