多可见元素类的Intersection Observer异常问题求助

你的问题核心在于给每个.box元素单独创建了Intersection Observer实例，这不仅造成性能浪费，还会因为闭包作用域导致回调逻辑出现异常，无法正确处理多个元素的交叉状态。另外，你在回调中额外传递元素参数的做法是冗余的，entries里的entry.target已经能直接获取当前交叉的元素。

修复后的代码 #

mounted() {
  this.setupIntersectionObserver()
}

setupIntersectionObserver() {
  // 单个Observer实例即可观察所有.box元素
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      // 直接通过entry.target操作当前交叉的元素
      if (entry.isIntersecting) {
        entry.target.classList.add('visible')
      } else {
        entry.target.classList.remove('visible')
      }
    })
  }, { threshold: 0 })

  // 批量让Observer观察所有.box元素
  document.querySelectorAll('.box').forEach(box => {
    if (box) {
      observer.observe(box)
    }
  })
}

关键改进点 #

• 复用单个Observer实例：Intersection Observer本身就支持同时观察多个元素，无需为每个元素单独创建实例，既提升性能又避免作用域问题。
• 移除冗余参数传递：直接使用entry.target获取当前交叉的DOM元素，无需额外传递元素引用，逻辑更清晰。
• 保持无$refs的需求：依然使用document.querySelectorAll获取元素，符合你的要求。

内容的提问来源于stack exchange，提问作者AnnaGino