Web API：ResizeObserver——监听元素大小的变化

前言

最近突然发现了ResizeObserver 感觉挺有用的就简单学习了一下。

众所周知window.resize事件能帮我们监听窗口大小的变化。但是reize事件会在一秒内触发将近60次，所以很容易在改变窗口大小时导致性能问题。换句话说，window.resize事件通常是浪费的，因为它会监听每个元素的大小变化（只有window对象才有resize事件），而不是具体到某个元素的变化。

而ResizeObserver 可以监听到 Element 的内容区域或 SVGElement的边界框改变。内容区域则需要减去内边距 padding。

参考：web API ResizeObserver

使用

兼容性

兼容性还是可以的，当然IE除外，毕竟微软自己都放弃了。

语法

const resizeObserver = new ResizeObserver(entries => {
  for (let entry of entries) {
  }
});
1
2
3
4

方法

ResizeObserver.disconnect()
取消和结束目标对象上所有对 Element或 SVGElement 观察。

ResizeObserver.observe()
开始观察指定的 Element或 SVGElement。

ResizeObserver.unobserve()
结束观察指定的Element或 SVGElement。

demo

<template>
    <div class="container" id="test">
        {{size}}
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const size = ref('');

onMounted(() => {
    size.value = '400 * 100';

    // 创建观察对象
    const resizeObserver = new ResizeObserver(entries => {
        // console.log(entries[0]);
        size.value = `${entries[0].contentRect.width} * ${entries[0].contentRect.height}`;
    });
    // 指定要观察的dom
    const test = document.getElementById('test');
    if (test) {
        resizeObserver.observe(test);
    }
});

</script>
<style lang="scss" scoped>
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 400px;
    height: 100px;
    overflow: hidden;
    border: 1px solid red;
    resize: both;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

注意：
css的resize 需要将overflow设置为hidden 才生效

效果