Vue3中ResizeObserver取消观察后仍重复触发问题求助

云原生阿岚

2026-7-8

问题原因与解决方案

核心问题

ResizeObserver方法调用错误：你使用了resizeObserver.disconnect(element)，但disconnect()是无参方法，作用是停止监听所有目标元素；要取消单个元素的监听，正确方法是unobserve(element)。
尺寸修改触发循环回调：回调内修改textContent会直接改变元素尺寸，即便暂时取消监听，这个尺寸变化可能已被ResizeObserver的异步队列捕获，重新监听后会立刻触发回调，形成无限循环。

正确实现代码

<script setup>
import { ref, onMounted } from 'vue'

const aRef = ref(null)
let resizeObserver = null
// 标记是否正在处理尺寸调整，避免重复触发回调
let isAdjusting = false

onMounted(() => {
  const element = aRef.value
  element.textContent = 'resize'

  resizeObserver = new ResizeObserver((entries) => {
    // 正在调整时直接跳过回调
    if (isAdjusting) return

    // 取消当前元素的监听
    resizeObserver.unobserve(element)
    isAdjusting = true

    // 执行你的尺寸调整逻辑（示例为文本拼接）
    element.textContent = element.textContent.concat('- some text- ')

    // 模拟异步调整过程（如复杂计算、接口请求）
    setTimeout(() => {
      // 调整完成后重置状态，重新开启监听
      isAdjusting = false
      resizeObserver.observe(element)
    }, 1000)
  })

  resizeObserver.observe(element)
})
</script>

<template>
  <span ref="aRef">no text</span>
</template>