如何监听视口水平Resize？Vue混合实现遇垂直触发异常求解答

首先，来解释为什么你在垂直调整窗口时，viewportWidthChanged 也会变为 true：

异常原因 #

1. 滚动条的干扰：当垂直调整窗口导致垂直滚动条出现或消失时，document.documentElement.clientWidth 会因为滚动条占用的横向空间而发生变化（比如滚动条宽度通常是15-20px），这直接导致你计算的 viewportWidth 改变，触发状态更新。
2. 多值取最大的不稳定性：你同时取 document.documentElement.clientWidth、window.innerWidth、document.body.clientWidth 的最大值，这三个值在浏览器布局计算的过程中，可能因为渲染顺序的差异，在垂直resize时出现短暂的不一致，导致最大值发生波动。
3. 移动端浏览器的特殊行为：部分移动端浏览器在导航栏隐藏/显示时，会微调视口宽度来适配全屏布局，即使你只是垂直方向的操作，也会触发宽度的微小变化。

接下来，针对你的需求（封装Vue mixin、仅监听水平方向resize、尽量简化变量），提供两个可行的方案：

方案一：优化全局resize监听+防抖 #

这个方案基于原生resize事件，通过防抖减少触发频率，同时优化宽度计算逻辑，只在宽度真正变化时执行自定义逻辑：

// 水平resize监听Mixin
const HorizontalResizeMixin = {
  data() {
    return {
      _lastWidth: document.documentElement.clientWidth,
      _resizeDebounceTimer: null
    };
  },
  methods: {
    // 核心处理函数：仅在宽度变化时触发回调
    _handleResize() {
      const currentWidth = document.documentElement.clientWidth;
      // 用Math.floor避免小数精度问题导致的误判
      if (Math.floor(currentWidth) !== Math.floor(this._lastWidth)) {
        this._lastWidth = currentWidth;
        // 触发组件自定义的水平resize钩子
        this.onHorizontalResize(currentWidth);
      }
    },
    // 组件可覆盖的钩子函数，默认空实现
    onHorizontalResize(width) {}
  },
  mounted() {
    // 防抖处理：200ms延迟，避免频繁触发
    window.addEventListener('resize', () => {
      clearTimeout(this._resizeDebounceTimer);
      this._resizeDebounceTimer = setTimeout(this._handleResize, 200);
    });
    // 初始化时执行一次，确保组件拿到初始宽度
    this._handleResize();
  },
  beforeUnmount() {
    window.removeEventListener('resize', this._handleResize);
    clearTimeout(this._resizeDebounceTimer);
  }
};

组件中使用示例：

<template>
  <div>当前视口宽度：{{ viewportWidth }}</div>
</template>

<script>
import HorizontalResizeMixin from './HorizontalResizeMixin.js';

export default {
  mixins: [HorizontalResizeMixin],
  data() {
    return {
      viewportWidth: 0
    };
  },
  methods: {
    onHorizontalResize(width) {
      this.viewportWidth = width;
      // 这里写你需要执行的业务逻辑
      console.log('水平宽度变化：', width);
    }
  }
};
</script>

方案二：使用ResizeObserver实现精准监听 #

ResizeObserver 是现代浏览器提供的API，可以直接监听元素的尺寸变化，相比全局resize事件更高效、精准，能避免垂直resize带来的误触发：

// 基于ResizeObserver的水平resize监听Mixin
const HorizontalResizeMixin = {
  data() {
    return {
      _resizeObserver: null,
      _lastWidth: document.documentElement.clientWidth
    };
  },
  methods: {
    _handleResize(entries) {
      const { width } = entries[0].contentRect;
      // 仅在宽度变化时触发
      if (Math.floor(width) !== Math.floor(this._lastWidth)) {
        this._lastWidth = width;
        this.onHorizontalResize(Math.floor(width));
      }
    },
    onHorizontalResize(width) {}
  },
  mounted() {
    // 创建ResizeObserver实例，监听根元素（html）的尺寸变化
    this._resizeObserver = new ResizeObserver(this._handleResize);
    this._resizeObserver.observe(document.documentElement);
    // 初始化
    this.onHorizontalResize(this._lastWidth);
  },
  beforeUnmount() {
    // 销毁观察者，避免内存泄漏
    if (this._resizeObserver) {
      this._resizeObserver.unobserve(document.documentElement);
      this._resizeObserver.disconnect();
    }
  }
};

优势：

• 只在目标元素（这里是视口根元素）的尺寸变化时触发，不会因为其他元素的resize而触发；
• 异步执行，性能优于全局resize事件；
• 可以精准获取元素的contentRect，避免滚动条等因素的干扰。

注意事项 #

• 如果需要兼容旧版浏览器（比如IE），方案一更合适，因为ResizeObserver不支持IE；
• 防抖时间可以根据需求调整，200ms是比较通用的取值，既不会太延迟也能过滤频繁触发；
• 使用Math.floor处理宽度值，是为了避免浏览器渲染时的小数精度问题导致的误判。

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