随着前端技术的发展，大家日常开发中基本都是使用各大框架，基本很少有直接去控制dom的情况，但是有些问题贴近dom的问题，还是需要解决，比如最烦人的高度宽度自适应的问题，用css可以解决百分之80这类问题，但是剩下的百分之20就比较麻烦。我这里举一个🌰：
如图：颜色区域是某个管理后台的页面结构，灰色部分表示左侧aside,橙色部分表示header和一些筛选操作，蓝色部分表示筛选的数据结果（一般为表格展示）。因为数据类型属性以及客户需求，橙色部分的少选条件可多可少，高度不定，为了保证页面不出现整页上下滑动的情况，蓝色部分的高度需跟随橙色部分高度的变化而变化，这里使用css蓝色部分不设置高度即可，蓝色部分每次会得到分配的高度.但是蓝色部分如果使用了element的表格，此时需要表格的高度根据蓝色部分高度的变化而变化，若内容过多则需固定表头，内容在蓝色区域内可滑动，查询elementUI文档得知
😀什么？我的高度是自动分配的，还不确定，我去哪儿找height.
找一下吧，找到了
this.$refs.tableWrap.offsetHeight
这样还真能得到，在munted之后拿到这个值赋给height，我的表格快乐的滑动起来了。
但是又有了新的问题，"可爱的"UI同事提出了橙色部分要有一个收起展开的功能，这样好看😲，好的好不好看你说了算。
那么橙色的部分在munted之后高度也能变化，那我难道给每个页面写一个收起展开的监听吗，不🙅♀️。
**我想监听「this.$refs.tableWrap.offsetHeight」**的变化。
试了computed、watch都实现不了
😃这个可以，
const resizeObserver = new ResizeObserver(entries => {
this.maxHeight = this.$refs.tableWrap.offsetHeight - 70;
});
resizeObserver.observe(this.$refs.tableWrap);
this.$once('hook:beforeDestroy', () => {
resizeObserver.disconnect();
});
ResizeObserver 接口可以监听到 Element 的内容区域或 SVGElement的边界框改变。内容区域则需要减去内边距padding。
ResizeObserver避免了在自身回调中调整大小，从而触发的无限回调和循环依赖。它仅通过在后续帧中处理DOM中更深层次的元素来实现这一点。如果（浏览器）遵循规范，只会在绘制前或布局后触发调用。
这样一来我的el-table在每次布局后高度发生了变化😜。
