Vue监测一个div宽度变化的几种方法汇总

更新时间：2026年03月11日 08:48:32 作者：小黑的铁粉

这篇文章主要介绍了在Vue中监测div宽度变化的四种方法：使用ResizeObserver、结合Vue的watch、使用window resize事件和引入第三方库,每种方法都有其适用场景和注意事项,推荐首选ResizeObserver,因为它性能高且代码简洁,需要的朋友可以参考下

方法 1：使用 ResizeObserver

ResizeObserver 是现代浏览器提供的 API，专门用于监听元素尺寸变化。它性能高效，适合动态监测 div 的宽度变化。

<template>
  <div ref="targetDiv" class="target-div">
    这是一个可调整大小的 div
  </div>
</template>

<script>
export default {
  data() {
    return {
      divWidth: 0,
    };
  },
  mounted() {
    // 创建 ResizeObserver 实例
    const observer = new ResizeObserver((entries) => {
      for (let entry of entries) {
        // 获取 div 的宽度
        this.divWidth = entry.contentRect.width;
        console.log('Div 宽度变化:', this.divWidth);
      }
    });

    // 监听目标 div
    observer.observe(this.$refs.targetDiv);
    
    // 组件销毁时清理 observer
    this.$on('hook:beforeDestroy', () => {
      observer.disconnect();
    });
  },
};
</script>

<style>
.target-div {
  width: 200px;
  height: 100px;
  background: lightblue;
  resize: horizontal; /* 允许水平拖动调整大小 */
  overflow: auto;
}
</style>

说明：

ResizeObserver 会在 div 尺寸变化时触发回调，获取最新的宽度。
使用 this.$refs.targetDiv 获取 DOM 元素。
在组件销毁时调用 observer.disconnect() 清理监听，避免内存泄漏。
resize: horizontal 是 CSS 属性，方便测试宽度调整（需要配合 overflow: auto）。

方法 2：结合 Vue 的 watch 监听动态宽度

如果 div 的宽度是由响应式数据（如 style 或计算属性）控制的，可以通过 watch 监听相关数据的变化。

<template>
  <div :style="{ width: divWidth + 'px' }" class="target-div">
    宽度: {{ divWidth }}px
  </div>
</template>

<script>
export default {
  data() {
    return {
      divWidth: 200,
    };
  },
  watch: {
    divWidth(newWidth) {
      console.log('Div 宽度变化:', newWidth);
    },
  },
};
</script>

<style>
.target-div {
  height: 100px;
  background: lightcoral;
}
</style>

说明：

适用于宽度由 Vue 响应式数据驱动的场景。
如果宽度变化是由外部（如用户拖动或 CSS）引起的，这种方法不适用。

方法 3：使用 window resize 事件（间接监测）

如果 div 的宽度变化与窗口大小相关（例如百分比宽度），可以监听 window 的 resize 事件。

<template>
  <div ref="targetDiv" class="target-div">
    这是一个宽度随窗口变化的 div
  </div>
</template>

<script>
export default {
  data() {
    return {
      divWidth: 0,
    };
  },
  methods: {
    updateWidth() {
      this.divWidth = this.$refs.targetDiv.offsetWidth;
      console.log('Div 宽度:', this.divWidth);
    },
  },
  mounted() {
    this.updateWidth(); // 初始化宽度
    window.addEventListener('resize', this.updateWidth);
    
    // 清理事件监听
    this.$on('hook:beforeDestroy', () => {
      window.removeEventListener('resize', this.updateWidth);
    });
  },
};
</script>

<style>
.target-div {
  width: 50%; /* 宽度随窗口变化 */
  height: 100px;
  background: lightgreen;
}
</style>

说明：

适合 div 宽度依赖窗口大小的场景（如 width: 50%）。
使用 offsetWidth 获取 div 的实际宽度。
注意清理事件监听以防止内存泄漏。

方法 4：使用第三方库（如 element-resize-detector）

如果需要兼容旧浏览器或更复杂的场景，可以使用第三方库如 element-resize-detector。

安装库：

npm install element-resize-detector

在 Vue 组件中使用：

<template>
  <div ref="targetDiv" class="target-div">
    这是一个可调整大小的 div
  </div>
</template>

<script>
import elementResizeDetectorMaker from 'element-resize-detector';

export default {
  data() {
    return {
      divWidth: 0,
    };
  },
  mounted() {
    const erd = elementResizeDetectorMaker();
    erd.listenTo(this.$refs.targetDiv, (element) => {
      this.divWidth = element.offsetWidth;
      console.log('Div 宽度变化:', this.divWidth);
    });

    // 清理监听
    this.$on('hook:beforeDestroy', () => {
      erd.removeAllListeners(this.$refs.targetDiv);
    });
  },
};
</script>

<style>
.target-div {
  width: 200px;
  height: 100px;
  background: lightyellow;
  resize: horizontal;
  overflow: auto;
}
</style>

说明：

element-resize-detector 提供了跨浏览器兼容的尺寸变化监听。
适合不支持 ResizeObserver 的旧浏览器。

注意事项

性能：避免在大量元素上绑定监听，可能导致性能问题。
清理：总是清理 ResizeObserver、事件监听或第三方库的绑定，防止内存泄漏。
浏览器兼容性：ResizeObserver 在现代浏览器（Chrome 64+、Firefox 69+ 等）支持良好，旧浏览器需 polyfill 或使用第三方库。

以上就是Vue监测一个div宽度变化的几种方法汇总的详细内容，更多关于Vue监测div宽度变化的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue+axios实现登录拦截的实例代码
本篇文章主要介绍了vue+axios实现登录拦截的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
Vue Element前端应用开发之常规的JS处理函数
在我们使用Vue Element处理界面的时候，往往碰到需要利用JS集合处理的各种方法，如Filter、Map、reduce等方法，也可以涉及到一些对象属性赋值等常规的处理或者递归的处理方法，本篇随笔列出一些在VUE+Element 前端开发中经常碰到的JS处理场景，供参考学习。
2021-05-05
vue的@change的用法及操作代码
@change 是 Vue.js 中用于监听表单元素值变化的事件处理器，这篇文章主要介绍了vue的@change的用法,需要的朋友可以参考下
2023-10-10
vue3实现页面跳转的示例代码
这篇文章给大家介绍了vue3如何实现页面跳转,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
2024-02-02
vue实现全选功能
这篇文章主要为大家详细介绍了vue实现全选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
VUE项目中加载已保存的笔记实例方法
在本篇文章里小编给大家整理了一篇关于VUE项目中加载已保存的笔记实例方法，有兴趣的读者们可以参考下。
2019-09-09
Vue element实现权限管理业务流程详解
目前本人再使用vue-element-admin项目时都是通过直接删除一些用不上的路由来进行侧边栏的清除，但是其实有一个更加好的办法来对项目的侧边栏显示的内用进行管理，就是权限管理，其实也不知道这个方法好不好，原理上来说时跟直接删除该路由的方式时一样的
2022-08-08
vue实现组件通信的八种方法实例
ue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,下面这篇文章主要给大家介绍了关于vue实现组件通信的八种方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2021-09-09
vue计算属性computed方法内传参方式
这篇文章主要介绍了vue计算属性computed方法内传参方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue视频时间进度条组件使用方法详解
这篇文章主要为大家详细介绍了vue视频时间进度条组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03