Vue監(jiān)測一個div寬度變化的幾種方法匯總

更新時間：2026年03月11日 08:48:32 作者：小黑的鐵粉

這篇文章主要介紹了在Vue中監(jiān)測div寬度變化的四種方法：使用ResizeObserver、結合Vue的watch、使用window resize事件和引入第三方庫,每種方法都有其適用場景和注意事項,推薦首選ResizeObserver,因為它性能高且代碼簡潔,需要的朋友可以參考下

方法 1：使用 ResizeObserver

ResizeObserver 是現代瀏覽器提供的 API，專門用于監(jiān)聽元素尺寸變化。它性能高效，適合動態(tài)監(jiān)測 div 的寬度變化。

<template>
  <div ref="targetDiv" class="target-div">
    這是一個可調整大小的 div
  </div>
</template>

<script>
export default {
  data() {
    return {
      divWidth: 0,
    };
  },
  mounted() {
    // 創(chuàng)建 ResizeObserver 實例
    const observer = new ResizeObserver((entries) => {
      for (let entry of entries) {
        // 獲取 div 的寬度
        this.divWidth = entry.contentRect.width;
        console.log('Div 寬度變化:', this.divWidth);
      }
    });

    // 監(jiān)聽目標 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 尺寸變化時觸發(fā)回調，獲取最新的寬度。
使用 this.$refs.targetDiv 獲取 DOM 元素。
在組件銷毀時調用 observer.disconnect() 清理監(jiān)聽，避免內存泄漏。
resize: horizontal 是 CSS 屬性，方便測試寬度調整（需要配合 overflow: auto）。

方法 2：結合 Vue 的 watch 監(jiān)聽動態(tài)寬度

如果 div 的寬度是由響應式數據（如 style 或計算屬性）控制的，可以通過 watch 監(jiān)聽相關數據的變化。

<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 事件（間接監(jiān)測）

如果 div 的寬度變化與窗口大小相關（例如百分比寬度），可以監(jiān)聽 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);
    
    // 清理事件監(jiān)聽
    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 的實際寬度。
注意清理事件監(jiān)聽以防止內存泄漏。

方法 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);
    });

    // 清理監(jiān)聽
    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 提供了跨瀏覽器兼容的尺寸變化監(jiān)聽。
適合不支持 ResizeObserver 的舊瀏覽器。

注意事項

性能：避免在大量元素上綁定監(jiān)聽，可能導致性能問題。
清理：總是清理 ResizeObserver、事件監(jiān)聽或第三方庫的綁定，防止內存泄漏。
瀏覽器兼容性：ResizeObserver 在現代瀏覽器（Chrome 64+、Firefox 69+ 等）支持良好，舊瀏覽器需 polyfill 或使用第三方庫。

以上就是Vue監(jiān)測一個div寬度變化的幾種方法匯總的詳細內容，更多關于Vue監(jiān)測div寬度變化的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: