Vue3组合式API中onMounted访问DOM元素class返回undefined问题

• 核心错误是模板ref的取值方式不对：只有当ref绑定在v-for循环渲染的元素/组件上时，ref.value才会存储DOM节点数组。你贴出的简化模板中<a>是单个元素，此时tabLink.value直接指向该a标签对应的原生DOM对象，不存在下标为0的项，强行访问tabLink.value[0]自然得到undefined。
• 如果你是在选项式API中手动写setup()函数而非使用<script setup>语法，还需要确认是否在setup的返回值中导出了tabLink，未导出时模板无法完成ref绑定，tabLink.value会一直是null，访问任何属性都会报错。
• 即使onMounted触发时DOM已完成挂载，如果你绑定的动态class依赖的chatSessionId是接口返回等异步赋值的数据，初始挂载时目标类名可能还未被添加到DOM上，直接取classList第一项也拿不到预期值。

1. 正确访问DOM的class列表 #

单元素绑定ref时，直接通过ref.value拿到原生DOM后调用classList相关API即可：

import { ref, onMounted, onUnmounted } from 'vue'
export default {
  setup() {
    const tabLink = ref(null);
    onMounted(() => {
      // 非<script setup>语法必须return tabLink，否则这里value始终为null
      if (!tabLink.value) return
      // 打印所有class
      console.log('DOM的class列表：', tabLink.value.classList)
      // 判断是否存在指定类
      const hasTargetClass = tabLink.value.classList.contains('chatUpdated')
      console.log('是否包含chatUpdated类：', hasTargetClass)
    })

    return { tabLink }
  }
}

如果a标签确实是v-for循环渲染的，ref值为数组时，需要先确认对应下标的DOM存在再操作，避免渲染时序问题：

onMounted(() => {
  const targetDom = tabLink.value?.[0]
  if (!targetDom) return
  console.log(targetDom.classList)
})

2. 监听类名变化 #

不要使用定时器轮询class，用原生MutationObserver监听class属性变化即可，性能更高，记得组件卸载时断开监听避免内存泄漏：

setup() {
  const tabLink = ref(null);
  let classObserver = null;

  // 类状态变化的处理逻辑
  const handleClassChange = () => {
    const hasChatUpdated = tabLink.value.classList.contains('chatUpdated')
    // 在这里写类名变化后的业务逻辑
    console.log('chatUpdated类状态更新：', hasChatUpdated)
  }

  onMounted(() => {
    if (!tabLink.value) return
    // 挂载后先执行一次初始检查
    handleClassChange()

    // 初始化监听器
    classObserver = new MutationObserver((mutations) => {
      mutations.forEach(mut => {
        if (mut.attributeName === 'class') {
          handleClassChange()
        }
      })
    })

    // 启动监听，仅监听class属性变化减少性能消耗
    classObserver.observe(tabLink.value, {
      attributes: true,
      attributeFilter: ['class']
    })
  })

  // 组件卸载时清理监听器
  onUnmounted(() => {
    if (classObserver) {
      classObserver.disconnect()
      classObserver = null
    }
  })

  return { tabLink }
}

补充：如果动态class绑定的状态是组件自身可控的响应式变量，优先通过watch监听对应响应式变量的变化判断类名状态，比直接监听DOM属性性能更好。

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