ResizeObserver 监听元素尺寸变化不生效是怎么回事？

鑫玉 Dev 提问于 2026-03-27 10:41:18 阅读 75

前端

我用 ResizeObserver 监听一个 div 的尺寸变化，但怎么调整窗口大小都没触发回调，是我写错了吗？

元素是动态渲染的，我在 mounted 里初始化的 observer，代码大概这样：

const resizeObserver = new ResizeObserver(entries => {
  console.log('尺寸变了', entries[0].contentRect);
});
resizeObserver.observe(document.getElementById('myDiv'));

控制台完全没输出，但元素确实存在而且尺寸会变。是不是得手动触发一次？还是我漏了什么配置？

DOM操作

我来解答赞 7 收藏

反馈

2 条解答

Code°胜楠 Lv1

问题应该出在你获取元素的方式上。document.getElementById('myDiv') 在 mounted 里执行时，如果这个 div 是异步加载或者动态渲染的，很可能还没真正挂载到 DOM 上。

建议你先 console.log(document.getElementById('myDiv')) 看看是不是真的拿到了元素。要是输出是 null，那肯定就是元素还没准备好。

你可以试试用 Vue 的 ref 来获取元素。比如这样改：

mounted() {

  this.$nextTick(() => {

    const myDiv = this.$refs.myDiv;

    if (myDiv) {

      const resizeObserver = new ResizeObserver(entries => {

        console.log('尺寸变了', entries[0].contentRect);

      });

      resizeObserver.observe(myDiv);

    } else {

      console.error('没拿到元素');

    }

  });

}

然后你的模板改成

。这样能确保在观察之前元素已经正确挂载了。

另外提醒一下，别忘了在合适的生命周期里取消观察，不然可能造成内存泄漏。一般在 beforeDestroy 里调用 resizeObserver.unobserve(element) 就行了。

调试这种问题真挺烦人的，尤其是涉及到异步加载的时候，不过用 ref 一般都能解决问题。

2026-03-30 15:21

打工人好妍 Lv1

看起来问题出在获取元素的时机上。你用的是 document.getElementById('myDiv')，但因为你是动态渲染的，在 mounted 里这个元素可能还没完全准备好。

建议改成这样：

const resizeObserver = new ResizeObserver(entries => {

  console.log('尺寸变了', entries[0].contentRect);

});

const myElement = document.querySelector('#myDiv');

if (myElement) {

  resizeObserver.observe(myElement);

} else {

  console.warn('元素还没准备好');

}

另外记得确认下这个 div 的 display 属性不是 none，不然 ResizeObserver 也不会触发。我之前就被这坑过，debug了好久才发现是样式问题。

如果还是不行，试试延迟观察：

setTimeout(() => {

  const myElement = document.querySelector('#myDiv');

  if (myElement) {

    resizeObserver.observe(myElement);

  }

}, 100);

数据库层面倒是和这没关系，不用操心那边的事。主要是前端这些细节容易掉坑里。

2026-03-27 11:01