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>