Vue JS：如何在窗口尺寸变化时获取其大小

嘿，作为Vue新手遇到这种窗口尺寸监听的问题太正常了，我来帮你把问题捋清楚，一步步解决～

首先先说说你现有代码里的小问题：

• 你定义的elem是一个方法，所以在mounted里写this.elem < 767其实是在拿函数对象和数字做比较，这肯定不对，得调用它this.elem()才行，但就算调用了，也只是页面加载时执行一次，窗口调整大小的时候不会重新触发判断。
• 你没有监听窗口的resize事件，所以窗口尺寸变化时，你的代码根本不知道要更新尺寸并重新执行逻辑。

接下来给你两种靠谱的实现方案，选你觉得顺手的就行：

方案一：通过监听resize事件+方法处理（推荐） #

这种方式逻辑清晰，还能避免内存泄漏：

<script>
export default {
  data() {
    return {
      size: 0 // 用来存储当前窗口宽度
    }
  },
  methods: {
    // 更新窗口尺寸并执行判断逻辑
    handleResize() {
      this.size = window.innerWidth;
      this.checkScreenSize();
    },
    // 单独封装屏幕尺寸判断逻辑
    checkScreenSize() {
      if (this.size < 767) {
        // 这里写小屏幕下要执行的代码
        console.log('当前是小屏幕，执行对应逻辑');
      } else {
        // 大屏幕下的逻辑
        console.log('当前是大屏幕，执行对应逻辑');
      }
    }
  },
  mounted() {
    // 页面加载完成后先初始化一次尺寸并执行逻辑
    this.handleResize();
    // 添加窗口resize事件监听
    window.addEventListener('resize', this.handleResize);
  },
  beforeUnmount() {
    // 组件销毁前移除监听，避免内存泄漏
    window.removeEventListener('resize', this.handleResize);
  }
}
</script>

方案二：使用watch监听尺寸变化 #

如果你想用watch属性来实现，也可以这么做：

<script>
export default {
  data() {
    return {
      size: 0
    }
  },
  methods: {
    updateSize() {
      this.size = window.innerWidth;
    }
  },
  mounted() {
    // 初始化尺寸
    this.updateSize();
    // 添加resize监听，更新size值
    window.addEventListener('resize', this.updateSize);
  },
  beforeUnmount() {
    // 移除监听
    window.removeEventListener('resize', this.updateSize);
  },
  watch: {
    // 监听size的变化，一旦变化就执行逻辑
    size(newSize) {
      if (newSize < 767) {
        // 小屏幕逻辑
        console.log('小屏幕触发');
      } else {
        // 大屏幕逻辑
        console.log('大屏幕触发');
      }
    }
  }
}
</script>

小提示： #

• 如果你觉得resize事件触发太频繁（比如拖动窗口时会连续触发），可以给handleResize或updateSize方法加个防抖，比如用setTimeout控制触发间隔，避免性能问题。
• 一定要记得在组件销毁时移除事件监听，不然会造成内存泄漏哦～

内容的提问来源于stack exchange，提问作者sara