Nuxt 2.15中滚动显示元素时.appear类被Vue重渲染清除的解决方法

问题根源 #

Vue的虚拟DOM机制会在组件重渲染时，依据模板绑定的规则同步真实DOM状态。你通过原生DOM操作手动添加的.appear类不在Vue的响应式管理范围内，因此会被Vue判定为“多余”的类，在重渲染过程中被清除。

可行解决方案 #

方案1：用响应式状态控制类推荐 #

将元素的显示状态交给Vue的响应式系统管理，替代原生DOM直接操作：

1. 在组件data中维护每个元素的appear状态
2. 模板里通过:class绑定状态
3. 滚动事件中更新响应式状态，而非直接修改DOM

示例代码：

<template>
  <div class="part">
    <div 
      v-for="(item, idx) in sectionItems" 
      :key="idx" 
      :class="{ 'appear': item.appear }"
      :ref="`section-${idx}`"
    >
      {{ item.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sectionItems: [
        { content: '区块1', appear: false },
        { content: '区块2', appear: false },
        // 按实际元素数量补充
      ]
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
    // 初始化检查一次，避免页面加载时已在可视区域的元素不触发显示
    this.handleScroll()
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      this.sectionItems.forEach((item, idx) => {
        if (!item.appear) {
          const element = this.$refs[`section-${idx}`][0]
          if (!element) return
          
          const posTop = element.getBoundingClientRect().top
          const trigger = window.innerHeight * 0.8
          if (posTop < trigger) {
            // 用$set确保响应式更新
            this.$set(this.sectionItems, idx, { ...item, appear: true })
          }
        }
      })
    }
  }
}
</script>

方案2：用v-once阻止元素重渲染 #

如果元素内容完全静态，不需要动态更新，可以给元素添加v-once指令，让Vue仅渲染该元素一次，后续组件重渲染不会修改它的DOM结构，手动添加的类就不会被清除：

<div class="part">
  <div v-once>静态内容1</div>
  <div v-once>静态内容2</div>
</div>

注意：此方法仅适用于无动态内容的元素，动态场景不适用。

方案3：在updated钩子中重新执行类添加逻辑 #

在组件重渲染完成后的updated钩子中，再次检查元素位置并添加.appear类，弥补被清除的类：

export default {
  mounted() {
    window.addEventListener('scroll', this.checkAppearElements)
    this.checkAppearElements()
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.checkAppearElements)
  },
  updated() {
    // 组件重渲染后重新检查并添加类
    this.checkAppearElements()
  },
  methods: {
    checkAppearElements() {
      document.querySelectorAll('.part > *:not(.appear)').forEach(element => {
        const posTop = element.getBoundingClientRect().top
        const trigger = window.innerHeight * 0.8
        if (posTop < trigger) {
          element.classList.add('appear')
        }
      })
    }
  }
}

注意：此方法可能存在轻微性能损耗，需确保不会触发无限更新循环。

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