vue 中监听页面尺寸变化就调用函数

方法一：使用 window.onresize 结合 Vue 实例的生命周期钩子（不推荐，存在覆盖风险）

虽然可以直接使用原生的 window.onresize 事件来监听窗口大小变化，但这种方式在 Vue 项目中有一些局限性，因为如果在多个地方都这样使用，后赋值的会覆盖前面的，容易导致一些不可预期的问题。不过简单了解一下其基本实现方式如下：

<template>
  <div>
    <!-- 这里放置页面内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      windowWidth: document.documentElement.clientWidth,
      windowHeight: document.documentElement.clientHeight
    };
  },
  mounted() {
    const that = this;
    window.onresize = function () {
      that.windowWidth = document.documentElement.clientWidth;
      that.windowHeight = document.documentElement.clientHeight;
      that.handleResize(); // 调用处理尺寸变化的函数
    };
  },
  methods: {
    handleResize() {
      console.log(`窗口宽度: ${this.windowWidth}px，高度: ${this.windowHeight}px`);
      // 在这里可以添加更多基于新尺寸的业务逻辑，比如根据不同尺寸显示不同的组件等
    }
  }
};
</script>

方法二：使用 window.addEventListener('resize', callback)（推荐）

使用 addEventListener 可以避免覆盖已有 resize 事件监听器的问题，并且更符合现代 JavaScript 开发习惯，在 Vue 项目中也是更常用的方式。以下是示例代码：

<template>
  <div>
    <!-- 这里放置页面内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      windowWidth: document.documentElement.clientWidth,
      windowHeight: document.documentElement.clientHeight
    };
  },
  mounted() {
    const that = this;
    window.addEventListener('resize', function () {
      that.windowWidth = document.documentElement.clientWidth;
      that.windowHeight = document.documentElement.clientHeight;
      that.handleResize();
    });
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize); // 在组件销毁时移除监听器，避免内存泄漏
  },
  methods: {
    handleResize() {
      console.log(`窗口宽度: ${this.windowWidth}px，高度: ${this.windowHeight}px`);
      // 在这里添加基于新尺寸的业务逻辑
    }
  }
};
</script>