vue中实时监听div元素盒子的宽高方法

<div ref="box"></div>

mounted() {
  window.addEventListener('resize', this.handleResize)
},

methods: {
  handleResize() {
    const width = this.$refs.box.offsetWidth;
    const height = this.$refs.box.offsetHeight;
    // 在这里处理宽高变化的逻辑
    console.log('盒子宽度:', width, '盒子高度:', height);
  }
},

beforeDestroy() {
  window.removeEventListener('resize', this.handleResize)
},

 <template>
  <div class="rightContainer">
    <h1>监听页面宽高</h1>
    <h2>当前整个页面宽度{{ windowWidth }}px</h2>
    <h2>当前整个页面高度{{ windowHeight }}px</h2>
  </div>
</template>
<script>
export default {
  name: 'WatchsHW',
  data() {
    return {
      windowHeight: document.body.clientHeight,
      windowWidth: document.body.clientWidth
    }
  },
  watch: {
    // 监听页面高度
    windowHeight(val) {
      console.log('实时屏幕高度：', val, this.windowHeight)
    },
    // 监听页面宽度
    windowWidth(val) {
      console.log('实时屏幕宽度：', val, this.windowHeight)
    }
  },
  mounted() {
    // <!--把window.onresize事件挂在到mounted函数上-->
    window.onresize = () => {
      return (() => {
        this.windowHeight = document.documentElement.clientHeight // 高
        this.windowWidth = document.documentElement.clientWidth // 宽
      })()
    }
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
.rightContainer{
  width: 100%;
  text-align: center;
  overflow: hidden;
}
</style>