js监听某个element元素的宽度变化

要实时监听 <div class="home-page"> 的宽度变化，并将宽度值复制给变量 b，可以使用 ResizeObserver 对象。ResizeObserver 是一种用于监听元素大小变化的接口。以下是一个示例代码：

// 获取目标元素
const homePage = document.querySelector('.home-page');

// 创建 ResizeObserver 对象
const resizeObserver = new ResizeObserver(entries => {
  // 当元素大小发生变化时执行的回调函数
  for (let entry of entries) {
    const width = entry.contentRect.width;
    const b = width;
    console.log(b);
  }
});
// 开始观察目标元素的大小变化
resizeObserver.observe(homePage);

上述代码中，我们首先获取到具有 .home-page 类名的元素。然后，创建一个 ResizeObserver 对象，并传入一个回调函数。当目标元素的大小发生变化时，回调函数将被触发。在回调函数中，我们可以通过 entry.contentRect.width 获取到元素宽度，并将其赋值给变量 b。最后，我们将变量 b 的值输出到控制台。

eg: 监听实际例子应用：

watch: {
    $route() {
      this.setObserver();
    }
  },
  mounted() {
    this.setObserver();
  },
  methods: {
    setObserver() {
      this.$nextTick(() => {
        const homePage = document.querySelector('.home-page');
        if (homePage) {
          if (this.resizeObserver) {
            // 如果已经存在一个 ResizeObserver，那么先断开它
            this.resizeObserver.disconnect();
          }
          this.resizeObserver = new ResizeObserver(entries => {
            for (const entry of entries) {
              console.log('监听：', entry.contentRect.width);
              this.checkWidth = entry.contentRect.width + 25;
            }
          });
          this.resizeObserver.observe(homePage);
        }
      });
    },
    }
    beforeDestroy() {
    // 停止观察目标元素的大小变化，并销毁 ResizeObserver 对象
    this.resizeObserver.disconnect();
  }

请注意，ResizeObserver 目前需要在大多数现代浏览器中使用，并且对于相对复杂的布局改变可能会有性能影响。如果只需要获取宽度一次，或者仅当特定的事件（例如窗口调整大小）发生时才需要获取宽度，您也可以考虑使用其他适当的事件监听机制。