如何监听DOM元素尺寸的变化？

思路：

window 有 resize 事件，我们可以联想到 iframe 也有 resize 事件。我们在要监听尺寸变化的 DOM 元素内添加一个 iframe，iframe 设置 width、height 都为 100%，并绑定 resize 事件就可以监听了。

代码实现：

<template>
<div class="container">
  <div class="item" :style="{height}">
    <iframe ref="iframe" class="iframe"></iframe>
  </div>
  <button @click="changeHeight">改变高度</button>
</div>
</template>

<script>
export default {
  data() {
    return {
      height: '200px'
    }
  },
  mounted () {
    this.$refs.iframe?.contentWindow.addEventListener('resize', () => {
      console.log('resize')
    });
  },
  methods: {
    changeHeight() {
      this.height = '300px';
    }
  },
};
</script>

<style scoped>
.item {
  position: relative;
  width: 200px;
  border: 1px solid #ccc;
}
.iframe {
  position: absolute;
  z-index: -1000;
  width: 100%;
  height: 100%;
  border: none;
  opacity: 0;
}
</style>