Vue多个组件监听窗口大小变化无效

在前端开发中，我们经常需要在Vue应用中监听窗口大小的变化，以便在响应式设计和布局中做出相应的调整。然而，有时候我们会遇到一个问题，就是当多个组件都需要监听窗口大小变化时，只有一个组件能够正常工作，其他组件的监听却无效。本文将探讨这个问题的原因，并提供解决方案。

问题分析

在Vue中，我们可以使用window.onresize事件来监听窗口大小的变化。一种常见的做法是在组件的mounted生命周期钩子中添加窗口大小变化的监听器，并在beforeDestroy生命周期钩子中移除监听器，以避免内存泄漏。下面是一个简单的示例代码：

<template>
  <div>
    <p>窗口宽度: {
  
  { windowWidth }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      windowWidth: 0
    };
  },
  mounted() {
    this.updateWindowWidth();
    window.addEventListener('resize', this.updateWindowWidth);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateWindowWidth);
  },