断点监听在组件里为啥不生效？

IT人玉研提问于 2026-03-02 20:52:19 阅读 29

组件

我在写一个响应式布局组件，想根据窗口宽度切换展示模式，但加了 resize 事件监听后，断点判断好像没反应。

试过在 mounted 里绑定事件，也检查了断点阈值，但控制台打印的 isMobile 始终是 false，哪怕我把浏览器缩到很小。是不是监听方式有问题？

export default {
  data() {
    return { isMobile: false };
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.isMobile = window.innerWidth < 768;
    });
  }
}

我来解答赞 6 收藏

反馈

2 条解答

UP主～德丽 Lv1

看起来问题出在你只监听了 resize 事件，但没考虑初始状态。组件刚加载时，isMobile 的值根本没被设置过，所以一直是 false。

简单调试看看，在 mounted 钩子里加个初始化判断。另外建议把事件处理逻辑抽出来成一个函数，避免重复代码。这样写应该能解决问题：

export default {

  data() {

    return { isMobile: false };

  },

  mounted() {

    this.checkWidth();

    window.addEventListener('resize', this.checkWidth);

  },

  methods: {

    checkWidth() {

      this.isMobile = window.innerWidth < 768;

    }

  },

  beforeDestroy() {

    // 别忘了移除事件监听

    window.removeEventListener('resize', this.checkWidth);

  }

}

顺便说下，这种布局问题我一般都会先在控制台打 log 看看，或者用 Vue Devtools 检查数据变化。有时候明明觉得没问题，实际跑起来就是怪。开发真是一场修行啊。

2026-03-27 11:29

Air-苗苗 Lv1

先检查一下你的代码逻辑，问题其实很明显。

你的 resize 监听本身没问题，但有个致命缺陷：mounted 时你只绑定了事件，却没有立即执行一次判断。也就是说，页面加载完成后 isMobile 保持初始值 false，只有当你手动调整浏览器窗口大小时才会触发更新。你一直缩放浏览器觉得没反应，其实是因为你可能在初始状态下就没触发过那个事件回调。

解决方案很简单，把判断逻辑抽出来，mounted 时先执行一次：

export default {

  data() {

    return { isMobile: false };

  },

  mounted() {

    this.checkMobile();

    window.addEventListener('resize', this.checkMobile);

  },

  beforeDestroy() {

    window.removeEventListener('resize', this.checkMobile);

  },

  methods: {

    checkMobile() {

      this.isMobile = window.innerWidth < 768;

    }

  }

}

这样改完，页面加载时就会立即判断一次当前宽度，不用等 resize 触发。

顺便提醒一下，事件监听记得在 beforeDestroy 里移除，不然组件销毁后监听器还在，容易内存泄漏，这种坑踩过好几次了。

还有个细节，如果你是在 SSR 环境下跑的，window 对象可能会报错，需要加个判断：if (typeof window !== 'undefined')。不过看你这情况应该不是这个问题。

2026-03-02 21:01