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

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

组件

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

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

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

我来解答赞 1 收藏

反馈

1 条解答

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